Apollo-client (react) - Update on create mutation - “Can't find field Fund({}) on object (ROOT_QUERY)”

问题

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

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
    ...
  }
}

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
    }

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..

UPDATE following comment:

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
  }
}

} `;

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);

Here is my create mutation:

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
}

} `;

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);

回答1:

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 },
});

来源：https://stackoverflow.com/questions/45534453/apollo-client-react-update-on-create-mutation-cant-find-field-fund-o

标签

javascript

reactjs

graphql

react-apollo

apollo-client