bgaleotti / react-query-native-devtools

161 stars 19 forks source link

TypeError: Cannot read property 'queryHash' of undefined #81

Open alex-a-pereira opened 2 years ago

alex-a-pereira commented 2 years ago

Hi, I'm trying to install react-query-native-devtools for my project and I'm getting a bunch of errors like the one mentioned in the title. Most of our queries print this error to the flipper logs. Any thoughts on how to fix this error?

I looked into the bundle and it looks like it's coming from the client.onMessage('queryCacheEvent' callback when trying to destructure the cacheEvent object - line 772 from the dist bundle highlighted below, which matches up in the source code to src/index.tsx:75

const {
        type,
        query,
        query: {
          queryHash // line 772 in bundle, in src/index.tsx:75 in source code
        }
      } = cashEvent;

relevent from package.json

"react-native": "0.65.2",
"react-query": "^3.9.7",
"react-native-flipper": "^0.131.1",
"react-query-native-devtools": "^4.0.0",

Attached is a screenshot of the error, here it is in plain text

Failed to process event for plugin flipper-plugin-react-query-native-devtools TypeError: Cannot read property 'queryHash' of undefined
    at EventEmitter.<anonymous> (/Users/MY_USER/.flipper/installed-plugins/flipper-plugin-react-query-native-devtools/4.0.0/dist/bundle.js:772:11)

    at file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:1139:230](http://flipper.app/Contents/Resources/app.asar/bundle.js:1139:230)

    at Wj (file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:90:98407](http://flipper.app/Contents/Resources/app.asar/bundle.js:90:98407))

    at EventEmitter.<anonymous> (file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:1139:219](http://flipper.app/Contents/Resources/app.asar/bundle.js:1139:219))

    at EventEmitter.emit (events.js:315:20)

    at file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:1542:2050](http://flipper.app/Contents/Resources/app.asar/bundle.js:1542:2050)

    at Array.forEach (<anonymous>)

    at SandyPluginInstance.receiveMessages (file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:1542:1975](http://flipper.app/Contents/Resources/app.asar/bundle.js:1542:1975))

    at processMessagesImmediately (file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:4138:349](http://flipper.app/Contents/Resources/app.asar/bundle.js:4138:349))

    at file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:4138:1428](http://flipper.app/Contents/Resources/app.asar/bundle.js:4138:1428)

    at Wj (file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:90:98407](http://flipper.app/Contents/Resources/app.asar/bundle.js:90:98407))

    at processMessageQueue (file:///Applications/[Flipper.app/Contents/Resources/app.asar/bundle.js:4138:1419](http://flipper.app/Contents/Resources/app.asar/bundle.js:4138:1419))

image

bgaleotti commented 2 years ago

@alex-a-pereira

  1. Can you share the events that are being triggered by react-query?
const client = new QueryClient();
client.getQueryCache().subscribe(console.log);
  1. What is the exact version of react-query?