React-apollo update not reloading after mutation if I transform data before the render()

Question

I have wrapped for both Query and Mutations so I can globally handle the repeat actions that need to happen with each Query, Mutation . In the query I transform the data so I don't need to worry about all the nodes, edges, etc

I am using react-adopt to wrap all my query and mutations components into one render prop back on the view layer.

Works - Page will re-render once a mutation has taken place

<ApolloQuery>

export const ApolloQuery = ({
  query: query,
  render,
}) => {
  return (
    <Query query={query}>
      {({ data }) => {
        return (
          <Fragment>
               render(data)
          </Fragment>
        )
      }}
    </Query>
  )
}

A Component

export default externalProps => {
  return (
    <QueryContainer {...externalProps}>
      {({ someQueryData, aMutation }) => { //react-adopt render props
        const { nestedData } = new apolloClass(someQueryData).start()
        return (
          <Grid container spacing={16}>
            {nestedData.map((ticket, index) => (
               {...Mutation button in here}
            ))}
         </Grid>
        )
      }}
    </QueryContainer>
  )
}

Does not work - Page does not re-render but cache is updated with correct records

<ApolloQuery>

    <Query query={query}>
      {({ data }) => {
        const transformedData = new apolloClass(data).start() //move transform into render
        return (
          <Fragment>
               render(transformedData)
          </Fragment>
        )
      }}
    </Query>

A Component

export default externalProps => {
  return (
    <QueryContainer {...externalProps}>
      {({ someQueryData: { nestedData }, aMutation }) => {
        return (
          <Grid container spacing={16}>
            {nestedData.map((ticket, index) => (
               {...Mutation button in here}
            ))}
         </Grid>
        )
      }}
    </QueryContainer>
  )
}

So now, the page will not update after a mutation if I move the apolloClass to transform before the render of the query

Answer 1

您很可能需要在突变选项中设置refetchQueries或awaitRefetchQueries以强制Apollo更新这些查询，从而触发重新渲染。