使用 Apollo Client

编程问答 2022-04-16

问题描述

我有一个关于 Apollo 客户端在调度更新突变时的行为的问题。

我有一个小应用程序可以获取数据并允许您修改它。修改后，更新突变被发送到graphQL。由于单个项目的更新会触发 Apollo 的自动缓存更新，因此可以在 UI 上立即看到更改。

但是，我注意到在更新后刷新页面时，我之前获取的项目的顺序发生了变化，最近更新的项目位于列表末尾。

我只是想知道这是否是预期的正常行为，是否有办法强制缓存在更新后保持相同的顺序？

编辑：这是我的解析器、变异和 useMutation 调用的代码。

解析器：

async UpdateUser(parent,args,ctx,info) {
            const { id,input } = args;
            const updatedUser = await ctx.prisma.user.update({
                where: {
                    id,},data: {
                    ...input,});
            return updatedUser;
        }

突变：

export const UPDATE_USER_MUTATION = gql`
    mutation UpdateUser($id: String,$input: createuserInput) {
        UpdateUser(id: $id,input: $input) {
            id
            name
            email
        }
    }
`;

使用突变：

        UpdateField({
            variables: {
                id: data.fieldID,input: {
                    [data.fieldName]: value,});

编辑 2：这是正在发生的事情的 gif。

App behaviour

谢谢！

解决方法

Mutation update 选项可以在 BE 排序之后正确更新（或插入）列表/数组（查询缓存结果）...

...但它会在更长的数据集上失败，分页结果 - 列表查询重新获取记录可以从当前 [页面] 列表/数组中删除。这将是更令人困惑的行为。

恕我直言不值得付出努力，这已经是可以接受的行为（索引/排序字段的突变）。

可能的解决方案：

  • 不重新获取列表查询，只更新查询列表缓存（变异update - 它会更新列表视图）；
  • 对于小型数据集，请使用 FE 可排序表组件（BE 顺序无关紧要）。
apolloapolloapolloapollo-clientgraphqlgraphqlreactjsreactjsreactjsreactjs