useQuery v5 persist data even when key changes

[jonathanadler]

Hey 👋

I'm writing an authentication flow, where given a firebase token I send a request to my own server to fetch some data, "user settings" for instance.

I have a hook like this:

export const useGetUserSettings = (firebaseToken?: string) => {
  const { isFetched, data, error } = useQuery({
    queryKey: ['user-settings', firebaseToken],
    queryFn: () =>
      fetch('path/to/api?token=' + firebaseToken, {
        method: 'GET',
      }).then((res) => res.json()),
    enabled: !!firebaseToken,
  });

  return { userSettings: data, isFetched };
}

The firebase tokens refreshes sometimes, and the query is invoked again.
What happens is that data is reset to undefined and isFetched is false again.

Is there a way to have the data persist between queries with different keys?
Since I just want to get the up-to-date data, and I'm assuming I already have fetched data, and I don't want to show a loader in the UI.

Thanks in advance.

[TkDodo]

please try to set placeholderData: (previousData) => previousData

[jonathanadler]

Yes, that worked, thanks!
Although isFetched is still false in this case, I can just use !data instead of it, so that's good enough for me.
Thanks again 🙏