Can I update cache on onSettled hook?

[jimmiejackson414-zz]

I'm working on adding optimistic updates to eliminate excessive network requests. I have extracted the giant method out of the component and in to a separate service file. So far my code looks like this:

Todos.tsx:

const TodoWidget: React.FC = () => {
  // client definition
  const client = graphqlClient();
  const queryClient = useQueryClient();

  // context
  const { selectedTrip } = useContext(PlanningContext);

  // queries and mutations
  const variables = { input: { tripId: selectedTrip?.id as string } };
  const { data, isLoading, refetch, isError } = useTodossQuery(
    client,
    variables,
    {
      enabled: false,
    }
  );
  const createItem = create(
    useCreateTodoMutation,
    queryClient,
    variables
  );

  return (
   {/* JSX here  */}
  );
}

todos.service.ts:

import { graphqlClient } from 'lib/graphqlRequest';
import { QueryClient } from 'react-query';
import { Todo } from 'generated/types';
import { generateRandomNumber } from 'helpers/functions';

const client = graphqlClient();

/**
 * Optimistically create new todo
 * @param mutation
 * @param queryClient
 * @param variables
 * @returns
 */
export const create = (
  mutation: any,
  queryClient: QueryClient,
  variables?: any
) => {
  return mutation(client, {
    onMutate: async (newItem: any) => {
      // cancel any outgoing refetches (so they don't overwrite our optimistic update)
      await queryClient.cancelQueries(['Todos', variables]);

      // snapshot the previous value
      const snapshot = queryClient.getQueryData([
        'Todos',
        variables,
      ]) as any;

      if (snapshot?.todos) {
        // optimistically update to the new value
        const temp = {
          ...newItem.input,
          id: generateRandomNumber().toString(),
        };
        queryClient.setQueryData(
          ['Todos', variables],
          (old: any) => ({
            todos: [temp, ...old.todos],
          })
        );
      }

      // return a context with the previous and new item
      return { snapshot, newItem };
    },
    onError: (_err: any, _newItem: any, context: any) => {
      queryClient.setQueryData(
        ['Todos', variables],
        context.snapshot
      );
    },
    onSettled: (data: any, error: any, variables: any, context?: any) => {
      console.log({ data });
      console.log({ error });
      console.log({ variables });
      console.log({ context });

      // TODO: need to update recently created item because id is temporary
      queryClient.setQueryData(['Todos', variables], () => ({
        todos: [
          data.createTodo.todo,
          ...context.snapshot.todos,
        ],
      }));
      queryClient.invalidateQueries(['Todos', variables], {
        refetchActive: true,
        refetchInactive: true,
      });
    },
  });
};

Everything within the onMutate hook works fine, however the issue I'm running in to is that the id of the optimistically created Todo is having to be randomly generated.

So in the scenario where a user creates a new Todo but then tries to immediately delete it, a Todo with that randomly generated ID wouldn't actually exist in the DB. I need to be able to replace that item in the onSettled hook, but looking at the Devtools the code I currently have there doesn't appear to be working. I also don't receive any errors. Any ideas out there?

[TkDodo]

Code looks good, can you reproduce it in a sandbox?
Side note: I would do the updating in onSuccess instead of onSettled, because only there you’ll always have an id in the response (onSettled is called in error cases, too)

[jimmiejackson414-zz]

@TkDodo that's a great point about using the onSuccess hook instead of onSettled... I'm still getting used to the API! In fact, that may be the fix for this whole thing. I resorted to just updating the cache in onSuccess as is described here in the docs just to get something working (so they're not technically optimistic updates yet), but I'll end up circling back and giving optimistic updates another shot.