[@urql/svelte] Svelte subscription example from docs doesn't work

[alexander-mart]

urql version & exchanges:

  "devDependencies": {
    "@urql/svelte": "^1.2.0",
    "graphql": "^15.5.0",
    "sapper": "^0.28.0",
    "svelte": "^3.17.3"
  }

Steps to reproduce

1. Install sapper (app framework, using svelte) by docs:

   npx degit "sveltejs/sapper-template#rollup" my-app
   npm install

2. npm install --save @urql/svelte graphql

3. Use example from @urql/svelte docs: https://formidable.com/open-source/urql/docs/advanced/subscriptions/#svelte

4. npm run dev

Expected behavior

• Realtime rendering data with graphql subscription

Actual behavior

• Error:

  src/components/Test.svelte changed. rebuilding...
  • server
  src/components/Test.svelte
  'result' is not defined
  108: 
  109: 
  110: {#if !$result.data}
         ^
  111:   <p>No new messages</p>
  112: {:else}
  • client
  src/components/Test.svelte
  'result' is not defined
  108: 
  109: 
  110: {#if !$result.data}
         ^
  111:   <p>No new messages</p>
  112: {:else}

Questions

• Where should $result come from if we have not declared it anywhere?
• Where i can find repo with worked example with @urql/svelte + graphql subscriptions? I found two examples:
  • urql/tree/main/packages/svelte-urql/example example was missing
  • https://github.com/dgraph-io/svelte-urql-example example was missing

Note

• If i replace $result to $messages, then the error is fixed, but the data is still not loaded, although the example using the query works on same server and same query sctructure

[kitten]

Can you check please whether the events are coming in for your WebSocket? Alternatively, you can use the debugExchange and add it to the list of exchanges of the Client like so and give us the output:

import { debugExchange, defaultExchanges, createClient, setClient } from '@urql/svelte';

const client = createClient({
  // ...
  exchanges: [debugExchange, ...defaultExchanges, /* subscriptionExchange */
});

If you then show us the console output we can have a look together at whether the subscription is started.

It looks like the reference to $result is indeed a typo and meant to be $messages

[alexander-mart]

@kitten Output after adding debugExchange:

[Exchange debug]: Incoming operation:  {
  key: 1151739825,
  query: {
    kind: 'Document',
    definitions: [ [Object] ],
    loc: { start: 0, end: 57, source: [Object] },
    __key: 1151739825
  },
  variables: {},
  kind: 'subscription',
  context: {
    url: 'https://graphql-engine-heroku-test.herokuapp.com/v1/graphql',
    fetchOptions: [Function: fetchOptions],
    fetch: undefined,
    preferGetMethod: false,
    suspense: false,
    requestPolicy: 'cache-first'
  }
}
No exchange has handled operations of kind "subscription". Check whether you've added an exchange responsible for these operations.

[kitten]

Ok, this warning afterwards means that you haven't actually set up an exchange yet to handle your subscriptions:

No exchange has handled operations of kind "subscription". Check whether you've added an exchange responsible for these operations.

Subscriptions are obviously bi-directional, meaning that for the standard GraphQL spec and HTTP server/API a RESTful endpoint is not enough to set up subscriptions. Furthermore, since the GraphQL spec doesn't specify what this transport should look like, there are several libraries you'll have to choose from to add subscriptions to your API, probably using Websockets.

I'd recommend graphql-ws myself, unless you already have an API that supports subscriptions with a specific protocol: https://formidable.com/open-source/urql/docs/advanced/subscriptions/#setting-up-graphql-ws The main thing to watch out for is to set up a subscriptionExchange for urql's Client in your client-side code.

I'll close this issue for now, since it's not a bug but a usage question, but feel free to keep posting and I'll try my best to help! 🙌

[alexander-mart]

I have new error after adding subscriptions-transport-ws by doc

Unable to find native implementation, or alternative implementation for WebSocket!

React app (with subscriptions) worked with subscriptions-transport-ws with the same server.

I has the same error from other graphql clients, which i try to connect with Sapper (based on Svelte)

This solution resolve this error, but create one another:

TypeError: Failed to resolve module specifier "events". Relative references must start with either "/", "./", or "../".

My objective is write PoC app based on Sapper that use realtime UI by graphql subscriptions with Hasura graphql-engine. And i can not found any worked example from web.

I was found worked example with Svelte (from Hasura authors), but it is not solution for Sapper, that i need.

This is how I came to @urql/svelte.

If you now any example for Hasura + GraphQL Subscriptions + Sapper, please let me know.

[alexander-mart]

@kitten Ok, but this is mean that docs for Svelte doesn't correct / full. Example code should work out-of-the-box, i mean. So, this issue is not done.

[kitten]

I see! 👍 What we assumed was that this paragraph at the top would be enough:

To add support for subscriptions we need to add the subscriptionExchange to our Client.

That's because introducing each section for React/Preact/Svelte/Vue with the same paragraph linking to the first anchor/section would be repetitive and tedious, but I can look at that.

I'm not sure why Sapper would complain and I'm not sure whether graphql-ws would work better, but that package is better maintained than Apollo's older one so you're more likely to get help with that package

[alexander-mart]

@timeshift92 has kindly provided an alternative solution, if it is useful to someone, I will leave it here: https://github.com/timeshift92/sapper-hasura