optimistic-gold

Problem with Optimistic Updates

I've been reading the documentation [https://tanstack.com/query/v4/docs/react/guides/optimistic-updates] and I'm getting several errors in my code which is as follows:

const mutation = useMutation({
  mutationFn: deleteUsers,
  onMutate: async (variables) => {
    const users = data?.pages.flatMap((page) => page.users) ?? [];
    const userFilters :reactcharts: = users.filter((user) => user.email !== variables.email);
    await queryClient.cancelQueries({ queryKey: ["users"] });

    const previusUsers = queryClient.getQueryData(["users"]);

    queryClient.setQueryData(["users"], () => {
      return {
        pages: [{ users: userFilters }],
        pageParams: [data?.pageParams],
      };
    );

    return { previusUsers };
  },
  onError: (err, newData, context) => {
    console.log(err, newData, context?.previusUsers);
    queryClient.setQueryData(["users"], context?.previusUsers);
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ["users"] });
  },
});

const deleteData = (email: string) => {
  mutation.mutate({ email, id: 1 });
};

const mutation = useMutation({
  mutationFn: deleteUsers,
  onMutate: async (variables) => {
    const users = data?.pages.flatMap((page) => page.users) ?? [];
    const userFilters :reactcharts: = users.filter((user) => user.email !== variables.email);
    await queryClient.cancelQueries({ queryKey: ["users"] });

    const previusUsers = queryClient.getQueryData(["users"]);

    queryClient.setQueryData(["users"], () => {
      return {
        pages: [{ users: userFilters }],
        pageParams: [data?.pageParams],
      };
    );

    return { previusUsers };
  },
  onError: (err, newData, context) => {
    console.log(err, newData, context?.previusUsers);
    queryClient.setQueryData(["users"], context?.previusUsers);
  },
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ["users"] });
  },
});

const deleteData = (email: string) => {
  mutation.mutate({ email, id: 1 });
};

the part of the code const previusUsers = queryClient.getQueryData(["users"]); returns undefined, also it doesn't do the mutation, it doesn't do the rendering.

export const deleteUsers = async (
{email,id,}: { email: string; id: number }) => {
  const response = await fetch(`https://randomuser.me/api/?results=10&seed=franco&page=${id}`,{
    method: "DELETE",
    body: JSON.stringify({
      email,
      }),
    },
  );
  return response.json();
};

export const deleteUsers = async (
{email,id,}: { email: string; id: number }) => {
  const response = await fetch(`https://randomuser.me/api/?results=10&seed=franco&page=${id}`,{
    method: "DELETE",
    body: JSON.stringify({
      email,
      }),
    },
  );
  return response.json();
};

Overview | TanStack Query Docs

TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze. Motivation

2 Replies

exotic-emerald•2y ago

Show a sandbox please

optimistic-goldOP•2y ago

the error was simple first the request to the api was wrong and second I was using const queryClient = new QueryClient() and not const queryClient = useQueryClient() what produced the error

Gaming

Programming

Problem with Optimistic Updates

Did you find this page helpful?