Search code examples
reactjsgraphqlapolloapollo-client

Order of cache items after update mutation using Apollo Client

I have a question concerning Apollo Client's behaviour when dispatching an update mutation.

I have a little application that fetches data and allows you to modify it. After the modification, an update mutation is sent to graphQL. The changes can be seen instantly on the UI since the update of a single item triggers an automatic cache update by Apollo.

However, I noticed that when I refresh the page after an update, the order of the items I previously fetched is changed with the recently updated item going at the end of the list.

I was just wondering if this is the normal behaviour to expect and if there was a way to force the cache to keep the same order after an update?

Edit: Here's the code for my resolver, mutation and useMutation call.

Resolver:

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

Mutation:

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

useMutation:

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

Edit 2: Here's a gif what's going on.. App behaviour

Thank you!

Solution

  • Mutation update option can update (or insert) properly list/array (query cached result) following BE sorting ...

    ... but it will fail on longer datasets, paginated results - on list query refetch record can be removed from current [page] list/array. It will be more confusing behavior.

    IMHO fighting is not worth the effort, it's already acceptable behavior (mutation of indexed/ordering field).

    Possible solutions:

    • don't refetch list query, only update the query list cache (mutation update - it will update the list view);
    • for small datasets, use FE sortable table component (BE order doesn't matter).