Skip to content

Query data not updated on instances of a successful query #1653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
fTrestour opened this issue Jan 15, 2021 · 4 comments
Closed

Query data not updated on instances of a successful query #1653

fTrestour opened this issue Jan 15, 2021 · 4 comments

Comments

@fTrestour
Copy link

Describe the bug
QueryClient is configured with a 1 minute staleTime.
I mount many instances of a single query (all have the same queryKey) pretty much at the same time.
The useQuery instance that triggers the network call gets to a success status once the request is done but other instances are stuck in a loading state with undefined data.

To Reproduce
I didn't manage to reproduce in a simple environment.

My queryClient looks like this:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 60 * 1000,
      retry: (failureCount, error) =>
        failureCount < 10 &&
        error instanceof HTTPError &&
        (error.status === null || error.status >= 500),
    },
  },
})

The hook that is mounted pretty much everywhere that shows the unexpected behaviour is the following:

export const useAuthenticatedUser = () => {
  const { data, ...other } = useQuery({queryKey: <CONSTANT_VALUE_HERE>, queryFn: () => apiQuery(...)})
  console.log(data)
  return { user: data, ...other }
}

Expected behavior
I'd expect to have all instances of useAuthenticatedUser return user data when the network query is successful.

Screenshots
image

Desktop (please complete the following information):

  • OS: MacOS 11.1
  • Browser: Chrome
  • Version: 87.0

Additional context
Notice the described behaviour doesn't happen every single time. Sometimes, all instances access the received data. Overall, I noticed the issue arises more often on the production build than on the development mode (I use CRA).

@fTrestour fTrestour changed the title Query data not updated on instances of a query Query data not updated on instances of a successful query Jan 15, 2021
@TkDodo
Copy link
Collaborator

TkDodo commented Jan 15, 2021

I didn't manage to reproduce in a simple environment.

not sure there is much we can do if you cannot reproduce it. One thing that comes to mind is that you maybe create different queryClients during render. make sure that the const queryClient is static and not created within your render function and that all components have the same QueryClientProvider above them.

@boschni
Copy link
Collaborator

boschni commented Feb 4, 2021

Does v3.6.1 fix your issue?

@fTrestour
Copy link
Author

It does! Thanks a lot for your work

@boschni
Copy link
Collaborator

boschni commented Feb 4, 2021

Good to hear!

@boschni boschni closed this as completed Feb 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants