如果我在render（）之前轉換數據，React-apollo更新不會在變異后重新加載

Question

我已經包裝了Query和Mutations，所以我可以全局處理每個Query, Mutation需要發生的重復操作。 在查詢中我轉換數據，所以我不需要擔心所有的nodes, edges, etc

我正在使用react-adopt將我的所有query和mutations組件包裝回視圖層上的一個渲染道具。

Works - 一旦發生突變，頁面將重新渲染

<ApolloQuery>

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

一個組件

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

不起作用 - 頁面不會重新渲染，但緩存會使用正確的記錄進行更新

<ApolloQuery>

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

一個組件

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

所以現在，如果我在query呈現之前移動apolloClass進行轉換，頁面將不會在突變后更新

Answer 1

您很可能需要在突變選項中設置refetchQueries或awaitRefetchQueries以強制Apollo更新這些查詢，從而觸發重新渲染。