Cannot read property 'executeQuery' of null

Question

Can anybody help me understand why i'm getting this error:

My setup :

New sveltekit project. ASP.net core backend for graphql. Querying was working before I modified it to include subscriptions.

error msg:

Cannot read property 'executeQuery' of null
TypeError: Cannot read property 'executeQuery' of null
at C:\Repos\AGScada\node_modules\@urql\svelte\dist\urql-svelte.js:234:11
at C:\Repos\AGScada\node_modules\wonka\dist\wonka.js:254:18
at Object.next (C:\Repos\AGScada\node_modules\wonka\dist\wonka.js:1161:14)
at C:\Repos\AGScada\node_modules\@urql\svelte\dist\urql-svelte.js:173:11
at Object.subscribe (C:\Repos\AGScada\node_modules\svelte\store\index.js:53:9)
at Object.subscribe (C:\Repos\AGScada\node_modules\@urql\svelte\dist\urql-svelte.js:96:14)
at C:\Repos\AGScada\node_modules\@urql\svelte\dist\urql-svelte.js:168:14
at C:\Repos\AGScada\node_modules\wonka\dist\wonka.js:1159:9
at C:\Repos\AGScada\node_modules\wonka\dist\wonka.js:247:7
at C:\Repos\AGScada\node_modules\wonka\dist\wonka.js:590:18

Source Code index.svelte:

    import { setClient, query, operationStore, subscription } from '@urql/svelte';
    import { createClient, defaultExchanges, subscriptionExchange } from '@urql/svelte';
    import { createClient as createWSClient } from 'graphql-ws';
    const wsClient = process.browser ? createWSClient({url: 'ws://localhost:5000/graphql',}):null;  
    const client = process.browser ? createClient({
    url: 'http://localhost:5000/graphql',
    exchanges: [
      ...defaultExchanges,
      subscriptionExchange({
        forwardSubscription: (operation) => ({
          subscribe: (sink) => ({
            unsubscribe: wsClient.subscribe(operation, sink),
          }),
        }),
      }),
    ],
  }): null;

    let tags = operationStore(`query {tags{tagName value}}`);

    let onTagUpdated = operationStore(`subscription {onTagUpdated{tagName value}}`);

    query(tags);
    subscription(onTagUpdated);

    setClient(client);

    if($tags.fetching)
    {
        console.log("loading");
    }    
    else
    {
        console.log($tags.data);
    }

Thankyou for any help.

Gajaruban Jeyakumar · Answer 1 · 2021-09-26T12:14:53.120

I got sveltekit and URQL working with the subscription support.

Source can be found here: https://github.com/ruban258/sveltekit_urql_test

import { Client, setClient, operationStore, subscription, defaultExchanges, subscriptionExchange, query, createClient } from '@urql/svelte';
import {SubscriptionClient} from 'subscriptions-transport-ws';
import { browser } from '$app/env';
import { createClient as createWSClient } from 'graphql-ws'; 


const subscriptionClient = browser ? new SubscriptionClient('ws://localhost:5000/graphql', { reconnect: true }): null;

const wsClient = browser? createWSClient({
  url: 'ws://localhost:5000/graphql',
}):null;

const client = browser ? new Client({
  url: 'http://localhost:5000/graphql',
  exchanges: [
    ...defaultExchanges,
    subscriptionExchange({
      forwardSubscription: (operation) => subscriptionClient.request(operation)
    }),
  ],
}): null;



const messages = operationStore(`
subscription onTagUpdated{
  onTagUpdated{
    tagName
    value
  }
}
  `);

const tags = operationStore(`
query{
  tags{
    tagName
    value
  }
}
  `);  

const handleSubscription = (messages = [], data) => {
return [data.newMessages, ...messages];
};


setClient(client);

Cannot read property 'executeQuery' of null

1 Answers1