Apollo Graphql fetchMore, updateQuery 不更新状态

Question

我目前正在尝试在我的 posts 上实现分页。这里使用 Apollo graphql 是我的 useQuery

const { data: postsData, fetchMore } = useQuery(POSTS_BY_USER_DRAFT, {
fetchPolicy: 'network-only',
variables: {
  user: user.id,
  start: 0,
  limit: limit
},
onCompleted: () => {
  setTotal(postsData[model].meta.pagination.total)
}})

这是我的 onClick 处理程序，用于获取更多 posts

const loadMorePosts = async () => {
const nextStart = start + limit
setStart(nextStart);
await fetchMore({
  variables: {
    user: user.id,
    offset: nextStart,
    limit: limit,
  },
  updateQuery: (prevResult, { fetchMoreResult }) => {
    if (!fetchMoreResult) {
      return prevResult
    }
    const prevData = prevResult[model].data
    const moreData = fetchMoreResult[model].data

    fetchMoreResult[model].data = [...prevData, ...moreData]
    // fetchMoreResult[model].data = [...moreData]
    return fetchMoreResult
  },
})}

我的查询成功了，因为我确实得到了正确的数据，但是 postsData 没有得到更新

[注意]：如果我将 fetchMoreResult[model].data = [...prevData, ...moreData] 切换为 fetchMoreResult[model].data = [...moreData] 我的 postsData 确实更新了。

我已经尝试了 return { ...fetchMoreResult } 和多种返回数据的方法，担心 immutability/comparaison 问题，但它似乎无法完成工作。

Answer 1

我不确定为什么，但是为 Apollo 设置一个 fetchPolicy 就可以了

const client = new ApolloClient({


link: authLink.concat(httpLink),
  cache: new InMemoryCache({
    typePolicies: {
      Publication: {
        merge: true,
      },
      Post: {
        merge: true,
      },
    },
  }),
  defaultOptions: defaultOptions,
})

Apollo Graphql fetchMore, updateQuery 不更新状态

Apollo Graphql fetchMore, updateQuery does not update state

next

apollo

graphql

react-apollo