Persistant urql subscription in store

[vin-ni]

I have a question concerning graphql subscriptions within a store with urql.

There's a bug / feature that creates the following issue:

1. A component creates a new pinia store which adds a graphql subscription
2. While this component is alive, all changes to variables stay reactive and update the queries
3. When I unload the component by routing to another page and back, the store is still there, but the query gets detached. I can update the variables in the store and they still are reactive, but the graphql part gets detached.

Is this correct and what is the reason for that behavior?

@kitten (maintainer of urql) confirmed this behavior: urql-graphql/urql#2422 (comment)

Here's also a minimal example I've set up: https://github.com/vin-ni/nuxt3-urql-routing-bug

And a video of the behavior:

Screen.Recording.2023-01-24.at.18.00.27.mov

I definitely need subscriptions and am now wondering how to work around this. Any ideas?

Thank you!

[vin-ni]

I might have found a solution. Any problems come to mind?
urql-graphql/urql#2935 (comment)

@kitten I found a new way of implementing it. Instead of using @nuxt/pinia, I wrote a custom plugin, that initiates the store and keeps it alive. Could you take a quick look and let me know what you think?

https://github.com/vin-ni/nuxt3-urql-routing-bug/tree/custom-plugin

Plugin Code

import { createPinia } from "pinia";
import { defineNuxtPlugin } from "#app";
import { useExampleStore } from "@/stores/exampleStore";

export default defineNuxtPlugin((nuxtApp) => {
  const pinia = createPinia();
  nuxtApp.vueApp.use(pinia);

  nuxtApp.hook("vue:setup", () => {
    const exampleStore = useExampleStore();
    nuxtApp.exampleStore = exampleStore;
  });
});

Component Code

import {useNuxtApp} from "#app";
import { storeToRefs } from "pinia";
const nuxtApp = useNuxtApp();

const exampleStore = nuxtApp.exampleStore;
const { code, data, fetching} = storeToRefs(exampleStore);