Apollo-client (react) - 更新创建突变 - “在对象(ROOT_QUERY)上找不到字段 Fund({})"； [英] Apollo-client (react) - Update on create mutation - "Can't find field Fund({}) on object (ROOT_QUERY)"

问题描述

使用:"react-apollo": "^1.4.3"

Using: "react-apollo": "^1.4.3"

在父组件中，我使用 GraphQL 查询父节点Fund"和子节点fundQuarterlyMetric".这将按以下格式返回数据:

In the parent component I query using GraphQL a parent node 'Fund' with children 'fundQuarterlyMetric'. This returns data in the following format:

{      
  id
  name
  ...
  fundQuarterlyMetrics (orderBy: asAtDate_ASC) {
    id
    year
    quarter
    ...
  }
}

当我尝试创建新的 fundQuarterlyMetrics 时，我必须使用更新功能更新 react-apollo 上的本地存储 (Apollo 客户端文档).它给了我一个错误:

When I try to create a new fundQuarterlyMetrics I have to update the local store on react-apollo using the update feature (Apollo Client docs). It gives me an error:

   Can't find field Fund({}) on object (ROOT_QUERY) {
     "Fund({\"id\":\"cj57hpfips0x7014414u5tk8m\"})": {
     "type": "id",
     "id": "Fund:cj57hpfips0x7014414u5tk8m",
     "generated": false
    }

问题是，当我使用 console.log 代理时，我可以看到基金和数据下的孩子......不知道该怎么做..

The thing is, is that when I console.log the proxy, I can see the Fund and it's children under data.... not sure what to do..

更新以下评论:

这里是父组件数据请求:

Here is the parent component data request:

export const fundPageQuery = gql`
 query Fund($fundId: ID!) {
Fund(id: $fundId) {
  id
  name
  ....other variables
  fundQuarterlyMetrics (orderBy: asAtDate_ASC) {
    id
    year
    quarter
    ....other variables
  }
}

}`;

以下是我使用的选项:

var optionsForCreateFundMetric = {
 update: (proxy, {data: {createFundMetrics}}) => {
 try {
  console.log('proxy', proxy);
  const data = proxy.readQuery({query: FundQL.fundPageQuery});
  console.log('data', data);
  data.Fund.fundQuarterlyMetrics.push(createFundMetrics);
  proxy.writeQuery({query: FundQL.fundPageQuery, data})
} catch (e) {
  console.log('error adding to store', e);
}

}};

export default compose(
 graphql(FundQL.createFundMetrics, {name: 'createFundMetrics', options: 
 optionsForCreateFundMetric}),
 graphql(FundQL.updateFundMetrics, {name: 'updateFundMetrics'})
 )(FundMetricsForm);

这是我的创建突变:

export const createFundMetrics = gql`
 mutation createFundQuarterlyMetric(
$fundId: ID
$year: Int!
$quarter: FUND_QUARTERLY_METRIC_QUARTER!
$netIRR: Float!
$tvpi: Float!
$rvpi: Float!
$dpi: Float!
$asAtDate: DateTime
$calledThisQuarter: Float!
$distributedThisQuarter: Float!
$cumulativeCalled: Float!
$cumulativeDistributed: Float!
$limitedPartnersNAV: Float!
$quarterlyValuationChangeLCY: Float
$quarterlyTotalReturn: Float
 ) {
createFundQuarterlyMetric(
  fundId: $fundId
  year: $year
  quarter: $quarter
  netIRR: $netIRR
  tvpi: $tvpi
  rvpi: $rvpi
  dpi: $dpi
  asAtDate: $asAtDate
  calledThisQuarter: $calledThisQuarter
  distributedThisQuarter: $distributedThisQuarter
  cumulativeCalled: $cumulativeCalled
  cumulativeDistributed: $cumulativeDistributed
  limitedPartnersNAV: $limitedPartnersNAV
  quarterlyValuationChangeLCY: $quarterlyValuationChangeLCY
  quarterlyTotalReturn: $quarterlyTotalReturn
) {
  id
  year
  quarter
  netIRR
  tvpi
  rvpi
  dpi
  asAtDate
  calledThisQuarter
  distributedThisQuarter
  cumulativeCalled
  cumulativeDistributed
  limitedPartnersNAV
  quarterlyValuationChangeLCY
  quarterlyTotalReturn
}

}`;

解决方案谢谢丹尼尔 - 我必须返回基金 ID 才能让它工作，所以谢谢你！

SOLUTION Thanks Daniel - I had to return the fund ID to make it work so thank you!

export default compose(
 graphql(FundQL.createFundMetrics, {name: 'createFundMetrics', options: 
optionsForCreateFundMetric, variables: {fundId: 
createFundQuarterlyMetric.fund.id}}),
 graphql(FundQL.updateFundMetrics, {name: 'updateFundMetrics'})
 )(FundMetricsForm);

推荐答案

Apollo 文档在强调这一事实方面做得很差，但是当您调用 readQuery 以从存储中获取先前获取的查询时，如果该查询采用了任何变量，则需要传入这些相同的变量来检索它.假设突变返回的 id 是基金的 id，你应该能够修改这一行:

The Apollo docs do a poor job of stressing this fact, but when you call readQuery to get a previously fetched query from the store, if that query took any variables, you need to pass in those same variables to retrieve it. Assuming the id returned by mutation is the fund's id, you should be able to just modify this line:

const data = proxy.readQuery({
    query: FundQL.fundPageQuery,
    variables: { id: createFundMetrics.id },
});

这篇关于Apollo-client (react) - 更新创建突变 - “在对象(ROOT_QUERY)上找不到字段 Fund({})"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！