About

Dispatch debug events to the devtools extension

https://github.com/FormidableLabs/urql/pull/

Todo

• Migrate to @urql/core
• Update devtools request pane
• Update peer dependency to match new @urql/core version

I have installed the devtools like the readme suggests. Heres my example project:

https://github.com/theianjones/screencasts/blob/73888e4ad164cc82ff36b98af89c5b29c4212015/content/playlists/intro-to-urql/urql-dev-tools/src/index.js#L1-L20

The exchange code is in index.js and my query is in App.js.

I get this error when I inspect the devtools panel:

Am I doing something wrong? Can you help me out?

Hi, first time user here.
I've got urql set up and working great in a react-native Expo project.
However, when I debug remote-js in the browser and access the urql tab I see this.

I'm also a little confused by this part of the instructions.

What's "the electron app"?

Thanks!

Hello and thanks for URQL.

I'm attempting to set up the devtools in a basic web app. I've added the devtools exchange to the client, but the URQL panel in the dev tools says "Waiting for exchange". How can I debug this?

Here's my client config code for reference:

import { Client, fetchExchange, gql } from "@urql/svelte";
import { cacheExchange } from "@urql/exchange-graphcache";
import { devtoolsExchange } from "@urql/devtools";
import * as util from '@/lib/util';

export default function client() {
    const client = new Client({
        url: "http://localhost:4040/api/report-graphql",
        exchanges: [
            devtoolsExchange,
            cacheExchange({ ... }),
            fetchExchange,
        ],
        fetchOptions: () => {
            const csrfToken = util.csrfToken();
            return {
                headers: { "X-CSRF-Token": csrfToken },
            };
        },
    });

    return client;
}

I'm using @rollup/plugin-replace:

...
    replace({
      'process.env.NODE_ENV': JSON.stringify(
        production ? 'production' : 'development'
      )
    }),

but I get this error using @urql/svelte:

urql-devtools-exchange.es.js:46 Uncaught ReferenceError: process is not defined
    at devtoolsExchange (urql-devtools-exchange.es.js:46)
    at urql-core.mjs:329
    at Array.reduceRight (<anonymous>)
    at urql-core.mjs:328
    at new Z$1 (urql-core.mjs:418)
    at initClient (urql-svelte.mjs:63)
    at Object.OnInit (urql.js:162)
    at onInit (actions.js:14)
    at instance$q (App.svelte:14)
    at init (index.mjs:1409)

We are looking at React internals to derive the displayName we could defer this to the integration specific implementation and make this a dev-only thing.

We're seeing the following error when using the devtools exchange within sveltekit as a module. For example, I have a gql.js file in which I'm setting up urql and all related exchanges, but when I pull that into a __layout.js and set it up, I'm getting the following error.

TypeError: window.addEventListener is not a function
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:240:12
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:257:4
    at Object.<anonymous> (/Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:258:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
4:55:21 PM [vite] Error when evaluating SSR module /src/routes/__layout.svelte:
TypeError: window.addEventListener is not a function
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:240:12
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:257:4
    at Object.<anonymous> (/Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:258:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
window.addEventListener is not a function
TypeError: window.addEventListener is not a function
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:240:12
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:257:4
    at Object.<anonymous> (/Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:258:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
window.addEventListener is not a function
TypeError: window.addEventListener is not a function
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:240:12
    at /Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:257:4
    at Object.<anonymous> (/Users/<REDACTED>/node_modules/@urql/devtools/dist/urql-devtools-exchange.js:258:2)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)

From the looks of it, when I do that, this exchange is relying on window to be available as part of the document, but in this context, that's not true. Maybe to fix, this could be wrapped in a try/catch first so it doesn't fire on the server-side, but does work on the client side.

Hey,

what are the conditions for the Chrome extension to pick up the devtoolsExchange correctly?

On our website I only see:

Waiting for exchange
Make sure you're using the Urql Devtools exchange!

but it never seems to be able to connect with the urql client.

I use:

• @urql/preact
• @urql/devtools
• devtoolsExchange is first in exchanges
• the website loads an embed script which initializes web components
• urql client(s) get initialized within web components

In the source code I saw that the connection between urql client and urql devtools works via window.postMessage, so web components shouldn't be the hurdle

About

Due to the way subscriptions work, the devtools panel is unable to determine whether a request has been completed or not.

See deprecation notes here: urql-graphql/urql#1098
And: urql-graphql/urql#1045

All instances of operation.operationName simply need to be changed to operation.kind and the peer dependency on @urql/core needs to be bumped to >=1.14.0.

About

urql-graphql/urql-devtools#169

About

The graphql dependency should be a peer dependency and not included with the bundle

About

Replace urql dependency with @urql/core

About

In react native, this library works great when running on a simulator as localhost will resolve to the host running the packager. However, when running on an actual iOS device, the hostname needs to be the IP Address of the machine running the packager. This can be retrieved through:

import { NativeModules } from 'react-native';
const scriptUrl = NativeModules.SourceCode.scriptURL;

However, there are no options to add the host name into these devtools since by default the native will use localhost:

https://github.com/FormidableLabs/urql-devtools-exchange/blob/3c61033465cd4e40430b6b224f750d332de86532/src/utils/messaging.ts#L21-L30

Is there anyway to enable the devtools when the page is inside an iframe?

Our team is currently running URQL in a SharedWorker and we'd like to use urql-devtools but it seems there isn't support for it yet. Currently, our environment is being misidentified as prod/SSR because SharedWorkers don't have a window object (link to code). Would you be able to add support for SharedWorker environments as well?

Let me know if you need any additional information. Thanks! 😃

Currently, there is no way to force the exchange to work in production. This can be useful when you want to analyse things in production. This has actually been previously discussed on a ticket i created a while ago (on the wrong repo, whoops): urql-graphql/urql-devtools#48.

It was kindly fixed by @JoviDeCroock.

Since then though it looks like the guard on NODE_ENV has returned and theres no way to override it.

It'd probably be annoying for folks to just remove the guard because people might see it unexpectedly start being there in prod (which might be why it came back?), so I understand this is actually not that trivial to fix without major version bump.

Maybe the exchange could have a new init function attached to it which accepts a config object or something?

createClient({
  exchanges: [
    devToolsExchange.init({force: true})
  ]
})

That way you could still use the current behaviour like

createClient({
  exchanges: [
    devToolsExchange
  ]
})

Without changing it for anyone. Alternatively there could be another env var introduced to override.

About

Currently connection-init messages are being sent when the exchange is initialised - this is fine for the browser (where the connection is synchronous and guaranteed) but not for native where the connection may not be established.