[bug][react-native] crash since 3.34.7+ - No QueryClient set, use QueryClientProvider to set one

[hirbod]

Describe the bug

I was running react-query with 3.34.5 for a couple of weeks and everything worked flawlessly on React Native.
Since 3.34.7, my app is crashing with following error:

Error: No QueryClient set, use QueryClientProvider to set one

Furthermore, I get this type error now:

Type 'import("/myapp/node_modules/react-query/types/core/queryClient").QueryClient' is not assignable to type 'import("/myapp/packages/expo/node_modules/react-query/types/core/queryClient").QueryClient'.
  Types have separate declarations of a private property 'queryCache'.ts(2322)
QueryClientProvider.d.ts(10, 5): The expected type comes from property 'client' which is declared here on type 'IntrinsicAttributes & QueryClientProviderProps & { children?: ReactNode; }

My QueryClientProvider is looking like this:

    <DripsyProvider theme={colorMode === 'dark' ? theme : themeLight}>
      <QueryClientProvider client={RNQueryClient}>
        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
          <GestureHandlerRootView style={{ flex: 1 }}>
            <Navigator theme={combinedTheme} />
            <Toast />
          </GestureHandlerRootView>
        </SafeAreaProvider>
      </QueryClientProvider>
    </DripsyProvider>

Your Example Website or App

Steps to reproduce

I am importing my client like so:

and the content of my service file is

import { QueryClient } from 'react-query';
// Create a client
export const RNQueryClient = new QueryClient();

import { QueryClientProvider } from 'react-query';
import { RNQueryClient } from 'app/services/react-query/query-client';

My QueryClientProvider is looking like this:

    <DripsyProvider theme={colorMode === 'dark' ? theme : themeLight}>
      <QueryClientProvider client={RNQueryClient}>
        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
          <GestureHandlerRootView style={{ flex: 1 }}>
            <Navigator theme={combinedTheme} />
            <Toast />
          </GestureHandlerRootView>
        </SafeAreaProvider>
      </QueryClientProvider>
    </DripsyProvider>

Expected behavior

Should not crash.
No issues if I downgrade to 3.34.5.

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: iOS 15.2
• Browser: React Native
• Version: 0.64.3

Additional context

The error triggers, as soon as this function calls:

  return useQuery(['UserDetails'], async () => {
    const response: AxiosResponse = await staffRequestService.getCharacters();
    return response.data;
  });

[TkDodo]

The only change in 3.34.6 was something stylistic in the devtools, so it's unlikely that this caused it: v3.34.5...v3.34.6

please show all involved components, especially GetUserDetails, or even better, provide a reproduction (e.g. in https://snack.expo.dev/)

[hirbod]

This is my user.ts

import { useQuery } from 'react-query';
import { AxiosResponse } from 'axios';
import { ApiService } from 'app/services/ApiService';
// import { useStore } from 'app/store';

/**
 *
 * @returns Deals with my request details api
 * Caching handled by react query
 */
export const GetUserDetails = () => {
  const staffRequestService = ApiService.createInstance();
  // const userId = useStore(state => state.userId);

  return useQuery(['UserDetails'], async () => {
    const response: AxiosResponse = await staffRequestService.getCharacters();
    return response.data;
  });
};

Which is being called in my Home Component (this first route opened by react-navigation).

And this is my Home Component

import React from 'react';
import { View, FlatList, RefreshControl } from 'react-native';
import { useStore } from 'app/store';

import styles from './styles';
import { GetUserDetails } from 'app/services/react-query/queries/user';
const Home: React.FC = () => {
  const setIsLoggedIn = useStore((state) => state.setIsLoggedIn);
  const { isLoading, isFetching, data = { results: [] } } = GetUserDetails();

  const onLogOut = () => {
    setIsLoggedIn(false);
  };

  const renderItem = ({ item }) => <View />;

  return (
    <View style={styles.container}>
      <FlatList
        data={data.results}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        refreshControl={
          <RefreshControl
            refreshing={isLoading || isFetching}
            onRefresh={() => {}}
          />
        }
      />
    </View>
  );
};

export default Home;

P.S: Sorry, I upgraded from 0.34.5 to 0.34.7.
I tested this multiple times now (downgrading and updating, deleting the cache and metro bundler cache etc)

v3.34.5...v3.34.7

[hirbod]

Could also be related: #3069

Sounds exactly like my issue, but he closed it without further notice unfortunately.

[TkDodo]

Are you sure that Home is inside a QueryClientProvider? You haven't shown that as far as I can see

[hirbod]

@TkDodo yes, it is a import and component of Navigator

[TkDodo]

const { isLoading, isFetching, data = { results: [] } } = GetUserDetails();

this seems invalid. Either make it a custom hook, or render GetUserDetails as a react component.

[hirbod]

@TkDodo I found the issue. I am using a Yarn Workspace (monorepo) and Lerna. react-query was updated in packages/expo but not packages/app (usally you should only install in one workspace but the only way to get autocomplete working was to install it in every package [I've double confirmed this with vscode devs] and this was the error.

The type error is gone and also the crash is gone. Not sure what was happening internally...

Sorry for bothering you!