@dev-plugins/react-query - where should I put the `useReactQueryDevTools` call in an expo-router app?

[drazik]

Hello,

I am trying to use @dev-plugins/react-query in an Expo app using expo-router. I am using Expo SDK 50 and expo-router 3.4.8.

I tried to put the useReactQueryDevTools(queryClient) call in my RootLayout component, but it doesn't show anything in the app or in the terminal. I don't know what I should expect to see, so I don't know if it's working but I'm not searching the devtools at the right place or if it doesn't work.

What I do (I removed extra stuff that has nothing to do with react-query):

import { QueryClient } from "@tanstack/react-query"
import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister"
import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client"
import AsyncStorage from "@react-native-async-storage/async-storage"
import { useReactQueryDevTools } from "@dev-plugins/react-query"
import { Slot } from "expo-router"

const queryClient = new QueryClient()

const persister = createAsyncStoragePersister({
  storage: AsyncStorage,
  throttleTime: 3000,
})

export default function RootLayout() {
  useReactQueryDevTools(queryClient)

  return (
    <PersistQueryClientProvider
      persistOptions={{ persister }}
      onSuccess={() =>
        queryClient
          .resumePausedMutations()
          .then(() => queryClient.invalidateQueries())
      }
      client={queryClient}
    >
      <Slot />
    </PersistQueryClientProvider>
  )
}

Does anybody know what I'm doing wrong?

[drazik]

Just sorted it out: I had to press Shift+M in the terminal to show more tools, then a list of the devtools appeared and "Open devtools plugin - @dev-plugins/react-query" was listed here. It opened the devtools UI in my web browser. The devtools show no data at all, but it may be related to https://github.com/expo/dev-plugins/issues/39

Edit: Yes, the lack of data was related to an outdated chrome version.