Apollo-client（反应） - 创建变异更新 - “无法在对象上找到字段基金（{}）（ROOT_QUERY）” [英] 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..

更新以下评论：

这是父组件数据请求：

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

}
`;

以下是我使用的选项：

Here are the options I used:

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
}

}
`;

解决方案
谢谢Daniel - 我必须退回基金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（反应） - 创建变异更新 - “无法在对象上找到字段基金（{}）（ROOT_QUERY）”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！