Plugin 'React Query Devtools' is unavailable

[hkeithk]

Hi @bgaleotti !

Trying to setup the plugin to work with flipper. Followed all the described setup steps including installing react-query-native-devtools (4.0.0) and in my application, setting it up in the App.js file to consume the queryClient, and installing flipper-plugin-react-query-native-devtools within flipper.

I was not able to find much documentation elsewhere on what may be going wrong, but the flipper-plugin is showing up as '..not supported by the selected application'

Any suggestions would be highly appreciated! Also happy to provide any other documentation as necessary

react: 18.2
react-native: 0.68
react-native-flipper": 0.164.0
react-query-native-devtools: 4.0.0
flipper desktop: 0.164.0

[bgaleotti]

Hi @hkeithk!

I just added a demo application #96. Could you check if that works for you?

[hkeithk]

Thank you very much @bgaleotti, will take a look ASAP and report back!

[efkan]

There is sth wrong with npm.

When I look at the npmjs page, I see that the package version is v4.1.1.

However, when I try to install it on the terminal, I get v4.0.0

@bgaleotti , I wonder if you could republish your package. It might solve this issue.

[bgaleotti]

@efkan there's nothing wrong.

• react-query-native-devtools is the package you need to install in your project.
• flipper-plugin-react-query-native-devtools is the Flipper plugin that lets you see your query cache. You can install it using Flipper's UI (it shouldn't be installed as a dependency in your project).

[williamneves]

WARN The native module for Flipper seems unavailable. Please verify that react-native-flipper is installed as yarn dependency to your project and, for iOS, that pod install is run in the ios directory.

    "dependencies": {
    "@tanstack/react-query": "^4.16.1",
    "expo": "~47.0.7",
    "expo-community-flipper": "^47.0.0",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.5",
    "react-native-flipper": "^0.174.0",
    "react-native-web": "~0.18.9"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.14",
    "@types/react-native": "~0.70.6",
    "react-query-native-devtools": "^4.0.0",
    "typescript": "^4.6.3"
  },
  "private": true
}

[bgaleotti]

@williamneves are you using https://docs.expo.dev/development/create-development-builds/?

[hkeithk]

Hey @bgaleotti , the demo app worked great! Thanks for sharing and apologies on the delayed response.

I've tried to recreate the same experience on a personal project but have not had success. Likely some flipper configuration specific to my project.

Separately - also seeing the same warning message as @williamneves. We did not use the link above

[bgaleotti]

@hkeithk

Separately - also seeing the same warning message as @williamneves

Are you using expo?

[intoday87]

me too! 😭

[bgaleotti]

@intoday87 did you run pod install as the warning says? Otherwise, please provide a repro repository.

[dong-ho-lee]

@bgaleotti
year! I tried clean pod install then( remove Pod folder and Podfile.lock and execute pod install)
in my personal repo it was solved by upgrading react-native version(0.70) and react(18) but it is huge thing.
you should try to reproduce failure by going back to previous commit :)
intoday87/react-native-practice@7ed55af
My company's source is still version 0.66, so the problem still occurs.

[hkeithk]

Thanks @dong-ho-lee will see if the v.70 update works on ours

[ferologics]

same issue

[joshsmith-watchbox]

Following the instructions here fixed the issue for me.