useQuery doesn't retry in the production build

[nicolls1]

I have a query that is failing from time to time for reasons I can't control and in development the expected behavior of retrying is working but when I build a production build with react-scripts build the query errors and then does not retry. The code looks like the following:

QueryClient:

import { QueryClient } from 'react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      cacheTime: 60 * 60 * 1000,
      staleTime: 1 * 60 * 1000,
      useErrorBoundary: false,
    },
  },
})
export default queryClient

Hook definition:

export const useProfile = () => {
  const { data: user } = useUser()
  return useQuery(
    'profile',
    async () => Service.getProfile(user!.uid),
    {
      retry: (failureCount: number, error) => {
        // logs confirm that it is working as intended in development
        console.log('fail', failureCount, error) 
        return failureCount < 5
      },
      enabled: !!user,
      onError: (e) => {
        console.log('Failed to get profile', e)
      },
    }
  )
}

Hook in use:

const Page: React.FC = () => {
  const { data: userProfile } = useProfile()
  ...
}

I have also tried manually calling manually calling refetch on a timeout and this works:

const Page: React.FC = () => {
  const { data: userDetails, isError, refetch } = useProfile()

  useEffect(() => {
    if (isError) {
      setTimeout(() => refetch(), 1000)
    }
  }, [isError, refetch])
  ...
}

Also, when the page is unfocused and then refocused, the query immediately retries and works.

Is there something different with the production react build that I'm missing or has anyone seen this before? Any tips would be greatly appreciated!!

[TkDodo]

Is there something different with the production react build that I'm missing or has anyone seen this before?

not that i know of. I also don’t see anything wrong with your code on first glance. Can you make a create-react-app repo that I can clone and have a look at that shows the issue?

[nicolls1]

Hi, Thanks for the quick response.

I don't have one currently but, I'll try to make one soon. I just noticed that a different query is retrying as expected. Maybe I can figure out the differences between the two.

The hook is for getting the user profile and it is only giving an error after the user registers.

The flow is like this:
Registration info is submitted and saved to database through a mutation. The mutation invalidates the profile query like so:

    onSuccess: () => queryClient.invalidateQueries('profile'),

My auth library gives me a callback when the user is loaded and I do the following to clear user data on login and ensure we start with a fresh state on logout:

      queryClient.resetQueries()
      queryClient.removeQueries()

Would it be possible that if the the the remove/reset calls are called after the query is started that the query would stop after a failure and not try again? It could be that locally it is fast enough for the auth update/reset happens before the query starts to explain why it only happens when deployed in production.

[nicolls1]

So I got rid of the line and its not doing it anymore:

queryClient.removeQueries()

I'll move it so it only fires when the auth state changes to null. I think this should have the same effect. My main worry was cached data being shared if someone else logged in and used the computer.