【问题标题】:Apollo-client (react) - Update on create mutation - "Can't find field Fund({}) on object (ROOT_QUERY)"Apollo-client (react) - 更新创建突变 - “在对象 (ROOT_QUERY) 上找不到字段 Fund({})”
【发布时间】:2018-01-14 00:35:18
【问题描述】:

使用:“react-apollo”:“^1.4.3”

在父组件中,我使用 GraphQL 查询父节点“Fund”和子节点“fundQuarterlyMetric”。这将返回以下格式的数据:

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

当我尝试创建一个新的 fundQuarterlyMetrics 时,我必须使用更新功能 (Apollo Client docs) 更新 react-apollo 上的本地存储。它给了我一个错误:

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

问题是,当我 console.log 代理时,我可以看到 Fund 和它的子数据...不知道该怎么做..

更新以下评论:

这里是父组件数据请求:

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
}

} `;

解决方案 谢谢 Daniel - 我必须返回基金 ID 才能使其正常工作,所以谢谢!

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

【问题讨论】:

  • 听起来您通过 Apollo 执行突变的方式存在问题 - 如果您正在处理突变,您不应该看到有关根查询的错误。请更新您的问题以包含您的代码,特别是在您定义 graphql HOC 和任何相关逻辑的地方(例如您对 update 的调用)。
  • 感谢丹的评论。我已将代码添加到问题中

标签: javascript reactjs graphql react-apollo apollo-client


【解决方案1】:

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

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

【讨论】:

  • 感谢 Daniel - 这很有效,所以我必须返回基金 ID 才能使其正常工作 -> {fundId: createFundQuarterlyMetric.fund.id} 并且成功了!非常感谢!
  • @Blackstone4 没问题,很高兴你成功了 :) 你仍然可以接受它作为正确答案
  • 我试图用this PR/ 来纠正这个糟糕的工作
  • 在我看来,突变应该返回与初始查询一样多的字段。该字段实际上可能会丢失,因为突变没有返回足够的信息来更新查询。解决方案是在突变预期结果中添加缺失字段。
猜你喜欢
  • 2018-03-03
  • 2021-09-18
  • 2018-09-13
  • 2019-12-05
  • 2020-12-13
  • 2020-09-18
  • 2020-02-12
  • 2019-03-26
  • 2021-05-01
相关资源
最近更新 更多