Subscription function documentation needs clarification

Hi Alec, I’ve implemented the subscription to a point: it is receiving updates from the graphql server. I can observe the update being received in the console. However, when I attempt to use the pattern in the example project the component is not updating–probably because my schema isn’t similar enough for it to be intuitive. I’d love to help refine the documentation but I need to get over the hump of understanding. I think part of the challenge is that you’re using a very different pattern than the Apollo/React hook [https://hasura.io/learn/graphql/react/subscriptions/3-create-subscription/] that many of us are familiar with (naturally, as this is Svelte-optimized). I’m wondering if we can start with more of an analog to that simpler example to bridge the gap.

Let’s say we have a graphql query just like you have it in the example project. It pulls a list of items like so:

const { data } = query<AllMyItems>(graphql`
     query AllMyItems($uid: ID!) {
          allItems: myItems(where: { uid: { _eq: $uid }, archived: { _eq: false } })
	       {
		    id
		    ...Card_item
	       }
          }
     `);

We list the results in generic Svelte form:

{#each $data.allItems as item (item.id)}
    <Card {item} />
{/each}

With Houdini, how can we create a subscription for the allItems list query instead of at the level of the component/fragment as you have it in the example? I want to do something like the following, but I’m not sure what the pattern is for connecting to the Houdini object/cache.

subscription(
  graphql`
	 subscription ItemUpdate($uid: ID!) {
	      myItems(where: { uid: { _eq: $uid } }) {
	          id
		  ...Card_item
              }
	  }
  `,
   {
         uid: $session.user.uid
   }
);

My best idea is to assign the outputs of the original query to a new svelte store and then update it when the subscription detects a change. But I’m not yet sure of how to access the updated values from the subscription function, as it doesn’t work to treat it as a store.

[AlecAivazis]

Great! I’m happy to hear that it’s working as expected. I’m going to go ahead and close this issue but I think you do bring up a good point about documenting subscription patterns so I’ll open up another to track that effort.

[draylegend]

how can I use subscriptions with ssr enabled?

I get the error:

6:57:18 PM [vite] Error when evaluating SSR module /src/environment.js:
Error: WebSocket implementation missing
    at Proxy.createClient (D:\dev\web\tests\todo\node_modules\graphql-ws\lib\client.js:76:15)
    at /src/environment.js:30:13
    at async instantiateModule (D:\dev\web\tests\todo\node_modules\vite\dist\node\chunks\dep-63d4bd14.js:75119:9)
6:57:18 PM [vite] Error when evaluating SSR module /src/lib/config.ts:
Error: WebSocket implementation missing
    at Proxy.createClient (D:\dev\web\tests\todo\node_modules\graphql-ws\lib\client.js:76:15)
    at /src/environment.js:30:13
    at async instantiateModule (D:\dev\web\tests\todo\node_modules\vite\dist\node\chunks\dep-63d4bd14.js:75119:9)
6:57:18 PM [vite] Error when evaluating SSR module /src/routes/__layout.svelte:
Error: WebSocket implementation missing
    at Proxy.createClient (D:\dev\web\tests\todo\node_modules\graphql-ws\lib\client.js:76:15)
    at /src/environment.js:30:13
    at async instantiateModule (D:\dev\web\tests\todo\node_modules\vite\dist\node\chunks\dep-63d4bd14.js:75119:9)
WebSocket implementation missing
Error: WebSocket implementation missing
    at Proxy.createClient (D:\dev\web\tests\todo\node_modules\graphql-ws\lib\client.js:76:15)
    at /src/environment.js:30:13
    at async instantiateModule (D:\dev\web\tests\todo\node_modules\vite\dist\node\chunks\dep-63d4bd14.js:75119:9)

environment.js

import { browser } from '$app/env';
import { Environment } from '$houdini';
import { createClient } from 'graphql-ws';

const ws = browser
	? createClient({
			url: 'wss://bu3ff.sse.codesandbox.io/graphql',
	  })
	: null;

console.log(ws);

export default new Environment(async function ({ text, variables = {} }) {
	// send the request to the api
	const result = await this.fetch('https://bu3ff.sse.codesandbox.io/graphql', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json',
		},
		body: JSON.stringify({
			query: text,
			variables,
		}),
	});

	// parse the result as json
	return await result.json();
}, ws);

svelte.config.js

import houdini from 'houdini-preprocess';
import { resolve } from 'path';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [houdini(), preprocess()],

	kit: {
		target: '#svelte',
		vite: {
			resolve: {
				alias: {
					$components: resolve('.', 'src', 'components'),
					$houdini: resolve('.', '$houdini'),
				},
			},
		},
	},
};

export default config;