invertase / invertase/tanstack-query-firebase

Using invalidateQueries function makes useFirestoreQueryData to return old data

Open
#51 2 comments 2 reactions 0 assignees View on GitHub
react-query-firebase
Dominant language
TypeScript
Stars
462
Forks
69
PR merge metrics
No merged PRs in 30d

Description

I'm trying to optimistically update a document in firestore, but on calling the **invalidateQueries** function once **useMutation** is settled I'm getting the old document data, though the document has been updated in the firebase. Also initially I get the updated data but after that, it gets replaced with the old data.

```
onMutate: async ({ currData }) => {
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
await queryClient.cancelQueries(["auth-user"]);

// Snapshot the previous value
const previousUserData = queryClient.getQueryData(["auth-user"]);

// Optimistically update to the new value
queryClient.setQueryData(["auth-user"], () => currData);

// Return a context object with the snapshotted value
return { previousUserData };
},
// If the mutation fails, use the context returned from onMutate to roll back
onError: (_error, _passedUser, context) => {
console.log("error", _error);
toast.show({
title: "Couldn't update user profile!",
});
queryClient.setQueryData(["auth-user"], context?.previousUserData);
},
// Always refetch after error or success:
onSettled: () => {
queryClient.invalidateQueries(["auth-user"]);
}
```

```
const {
data: user,
isLoading: isLoadingUser,
isFetching,
error: userError,
} = useFirestoreDocumentData(
["auth-user"],
doc(db, "users", userId),
{
subscribe: true,
}
);
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.