使用 Apollo 客户端更新突变后缓存项的顺序

Question

我有一个关于 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，这是怎么回事..

谢谢！

Answer 1

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

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

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

可能的解决方案：

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