foreign-sapphire

React native Error "No QueryClient set, use QueryClientProvider to set one"

Hey, i am having a problem with React Native integration of tanstack react query. Here is my code:

import * as React from "react";

import { useFonts } from "expo-font";
import { View } from "react-native";
import * as SplashScreen from "expo-splash-screen";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Host } from "react-native-portalize";
import { ActionSheetProvider } from "@expo/react-native-action-sheet";
import { AuthProvider } from "./src/context/auth";
import RootNavigation from "./src/navigation";

SplashScreen.preventAutoHideAsync();

const queryClient = new QueryClient({
  defaultOptions: {
    refetchOnWindowFocus: false,
  },
});

export default function App() {
  const [fontsLoaded] = useFonts({
    Grotley: require("./assets/fonts/Grotley-Regular.otf"),
    Bandar: require("./assets/fonts/BandarRegular.otf"),
    BandarBold: require("./assets/fonts/Bandar-Bold.otf"),
  });

  const onLayoutRootView = React.useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <Host>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <ActionSheetProvider>
            <View
              style={{
                flex: 1,
              }}
              onLayout={onLayoutRootView}
            >
              <RootNavigation />
            </View>
          </ActionSheetProvider>
        </AuthProvider>
      </QueryClientProvider>
    </Host>
  );
}

import * as React from "react";

import { useFonts } from "expo-font";
import { View } from "react-native";
import * as SplashScreen from "expo-splash-screen";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Host } from "react-native-portalize";
import { ActionSheetProvider } from "@expo/react-native-action-sheet";
import { AuthProvider } from "./src/context/auth";
import RootNavigation from "./src/navigation";

SplashScreen.preventAutoHideAsync();

const queryClient = new QueryClient({
  defaultOptions: {
    refetchOnWindowFocus: false,
  },
});

export default function App() {
  const [fontsLoaded] = useFonts({
    Grotley: require("./assets/fonts/Grotley-Regular.otf"),
    Bandar: require("./assets/fonts/BandarRegular.otf"),
    BandarBold: require("./assets/fonts/Bandar-Bold.otf"),
  });

  const onLayoutRootView = React.useCallback(async () => {
    if (fontsLoaded) {
      await SplashScreen.hideAsync();
    }
  }, [fontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <Host>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <ActionSheetProvider>
            <View
              style={{
                flex: 1,
              }}
              onLayout={onLayoutRootView}
            >
              <RootNavigation />
            </View>
          </ActionSheetProvider>
        </AuthProvider>
      </QueryClientProvider>
    </Host>
  );
}

Any help?

6 Replies

genetic-orange•3y ago

Maybe try using a stabilized query client

const [queryClient] = useState(new QueryClient({ ... }));

const [queryClient] = useState(new QueryClient({ ... }));

Or maybe, move your query-client provider above the <Host /> wrapper, since that seems to be component, which could be rerendered I suppose, and the QueryClientProvider is just for context.

national-gold•3y ago

What is the issue?

foreign-sapphireOP•3y ago

No QueryClient set, use QueryClientProvider to set one => getting that as an error in React Native app. @julien

national-gold•3y ago

Ah yeah sorry I missed the title. Where is the error triggered in your code? Usually this happens when calling useQuery from a component that is not a descendant of <QueryClientProvider>. For example you'll get this error if you call useQuery (or any other tanstack query hook) from inside <Host> since it's above <QueryClientProvider>.

foreign-sapphireOP•3y ago

I moved the QueryClientProvider on top and it works, so Host was killing it.

genetic-orange•3y ago

Yup, whenever that host component rerendered it probably was killing the context provider for the query client

Gaming

Programming

React native Error "No QueryClient set, use QueryClientProvider to set one"

Did you find this page helpful?