javascript - 如果我在 render() 之前转换数据，React-apollo 更新不会在突变后重新加载

Question

我已经对 Query 和 Mutations 进行了包装，因此我可以全局处理每个Query, Mutation. 在查询中我转换了数据，所以我不需要担心所有的nodes, edges, etc

我正在使用将我的所有组件和组件react-adopt包装到视图层上的一个渲染道具中。querymutations

作品 - 一旦发生突变，页面将重新渲染

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

apolloClass所以现在，如果我在渲染之前移动到变换，页面将不会在突变后更新query

标签： javascriptreactjsgraphqlreact-apolloreact-adopt

Answer 1

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