T
TanStack•3y ago
rare-sapphire

Query not updating after mutation

So I have an endpoint that fetches a single artwork, within that component, I need to upload images to that single object but after firing the mutation, it does not update in real time, I believe there is something I may be doing wrong, Will appreciate a second look at my code to assist me. Thanks in advance @TkDodo 🔮 
export const useUploadAssets = ({ id }: { id: string }) => {
  const dispatch = useAppDispatch();
  const queryClient = useQueryClient();

  return useMutation(
    ({ assetsUrls }: Partial<ArtworkArgs>) => uploadAssets({ assetsUrls, id }),
    {
      onMutate: urls => {
        const value = queryClient.setQueryData(
          [QUERYKEY.ARTWORKS, { id }],
          (data: any) => ({
            ...data,
            urls,
          })
        );

        return value;
      },
      onSuccess: data => {
        queryClient.setQueryData(
          [QUERYKEY.ARTWORKS, { id: data?.data?._id }],
          data?.data
        );
        dispatch(
          addNotification({ type: "success", message: "Asset uploaded!" })
        );
      },
      onError: (err: any) => {
        console.log("Error", err);
      },
    }
  );
};
export const useUploadAssets = ({ id }: { id: string }) => {
  const dispatch = useAppDispatch();
  const queryClient = useQueryClient();

  return useMutation(
    ({ assetsUrls }: Partial<ArtworkArgs>) => uploadAssets({ assetsUrls, id }),
    {
      onMutate: urls => {
        const value = queryClient.setQueryData(
          [QUERYKEY.ARTWORKS, { id }],
          (data: any) => ({
            ...data,
            urls,
          })
        );

        return value;
      },
      onSuccess: data => {
        queryClient.setQueryData(
          [QUERYKEY.ARTWORKS, { id: data?.data?._id }],
          data?.data
        );
        dispatch(
          addNotification({ type: "success", message: "Asset uploaded!" })
        );
      },
      onError: (err: any) => {
        console.log("Error", err);
      },
    }
  );
};
2 Replies
optimistic-gold
optimistic-gold•3y ago
impossible to say from just seeing this snippet. Maybe this helps: https://tkdodo.eu/blog/react-query-fa-qs#why-are-updates-not-shown
React Query FAQs
Answering the most frequently asked React Query questions
rare-sapphire
rare-sapphireOP•3y ago
thanks

Did you find this page helpful?