Fails to load with Next JS

[someonewasherebefore]

When clicking on "URQL" in dev tools I receive these errors (These are emitted in the chrome, not the console):

"TypeError: Cannot read property 'map' of undefined", source: chrome-extension://urql-devtools/panel.js (45493)

"Uncaught TypeError: Cannot read property 'map' of undefined", source: chrome-extension://urql-devtools/panel.js (45543)

"Uncaught (in promise) TypeError: Failed to fetch", source: chrome-extension://urql-devtools/panel.js (46210)

import { createClient, dedupExchange, fetchExchange } from 'urql'
import { devtoolsExchange } from '@urql/devtools'
import { cacheExchange } from '@urql/exchange-graphcache'

const IS_PROD = process.env.NODE_ENV === 'production'
const IS_BROWSER = typeof window !== 'undefined'

import 'isomorphic-fetch'

export const createUrqlClient = () => {
  const exchanges = [dedupExchange, cacheExchange(), fetchExchange]

  if (IS_BROWSER) {
    exchanges.push(devtoolsExchange)
  }

  return createClient({
    url: IS_PROD ? `https://x.there.team/api` : `http://localhost:7001/api`,
    exchanges,
  })
}

Debugging aid:

• React dev tools works fine.
• window.__urql__.url is set correctly in console.
• Introspection is enabled, I checked with Apollo Server's Playground.

[lukasluecke]

I have the same problem, was just about to create an issue when I saw this one.

[JoviDeCroock]

Gave this a look and it seems that event.panels is undefined. This is hard for me to grasp since we seem to always return one https://github.com/FormidableLabs/urql-devtools/blob/ff617d93458afc74dce31ab1e249680ecb88efde/src/panel/context/Events.tsx#L204 we could guard it but this seems like a deeper issue, I'll try to setup a minimal reproduction.

[someonewasherebefore]

@JoviDeCroock Thank you. FWIW, I got the error by the most minimal example with just one useQuery { dummy } and no Mutation.

[JoviDeCroock]

I've tried this and it seems that the devtools (and exchange) need a new release, when using the one from the chrome store I see your error. When using my local version it just works (hence why I was getting confused)

[lukasluecke]

@JoviDeCroock Thanks for the quick reply, looking forward to the new releases 🙂 since I'm trying to debug some issues with the graphcache right now it would really come in handy to have the DevTools 😁

[someonewasherebefore]

@lukasluecke Thank you too for debugging graphcache! I'm noticing an issue with catch-and-network not caching, I'm also needed the devtool for this :)

[lukasluecke]

@momakes Might be related to my issue then - it also involves some unexpected cache misses 😅 not really a huge issue, since it will just load the data in that case - but I'll try to figure it out anyway 🙂

[JoviDeCroock]

@lukasluecke @momakes if you want we can talk about the (maybe) bug on spectrum. If it helps you can use the following template to try and minimally reproduce the issue: https://codesandbox.io/s/urql-issue-template-client-iui0o

If you can describe the issue I can also give it a shot. Thanks for the issue reporting, helps us ensure to give you all a good experience!

[lukasluecke]

@JoviDeCroock I will create an issue and / or reproduction once I know it's actually an issue with the cache - which would probably be easier to find out, if I can use the dev tools 😉 It might just as well be a problem with my project 🙈

[JoviDeCroock]

For the time being you can use the network tab it should show similar things to the devtools but less structured and without the meta.

Pinging the needed people for that publish in the meantime

[lukasluecke]

@JoviDeCroock The problem with the network tab is, that the data returned is correct - it's jsut that there should not be a request at all. Sadly the reproduction template (or in this case, the linked GraphQL server) only has list queries, no item queries. I'll create an issue describing my general issue in the graphcache repository meanwhile 🙂

[BjoernRave]

I think this is fixed now with the newest version. At least it works for me

[JoviDeCroock]

Thanks for notifying, yes it should be! If anyone else runs into it feel free to ping

[edw19]

I have this warning in nextjs

DevTools failed to load source map: Could not load content for chrome-extension://mcfphkbpmkbeofnkjehahlmidmceblmm/content_script.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

[andyrichardson]

@edw19 this looks to be unrelated - feel free to create a new issue if it's impacting your ability to use devtools :+1: