gbicou / nuxt-urql Goto Github PK

I have a use case where I want to abstract out some of my GraphQL logic and put them into separate Typescript files. In these files, I don't have access to setup or any of the Vue's lifecycle hook. If possible, I want a way to access the client that was created in the nuxt.config.ts file and use it outside of the Nuxt components.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): update dependency prettier to v3.1.1
• chore(deps): update dependency semantic-release to v22.0.12
• chore(deps): update dependency ts-node to v10.9.2
• chore(deps): update dependency typescript to v5.3.3
• chore(deps): update dependency vue to v3.3.11
• fix(deps): update dependency @urql/core to v4.2.1
• fix(deps): update nuxtjs monorepo to v3.8.2 (@nuxt/kit, @nuxt/schema, nuxt)
• chore(deps): update dependency @types/node to v20.10.4
• chore(deps): update dependency eslint to v8.55.0
• chore(deps): update dependency eslint-config-prettier to v9.1.0
• fix(deps): update dependency @urql/exchange-graphcache to v6.4.0

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency vitest to v1

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

How can I access the client directly? I want to do something like this:

client
  .query('{ test }', {
    /* vars */
  })
  .toPromise()
  .then(result => {
    console.log(result); // OperationResult
  });

In regular Urql, I would create a client, then export the client to be used outside of Vue components. How can I do this using Nuxt Urql? From my understanding is that Nuxt Urql already creates the client in the Nuxt config file, but is there a way to access that client somehow without defining a new one?

without providing a urql.config.ts, only a url and defaults exchanges

Hi I have sucessfully setup urql in nuxt3 with a customized urql.config.ts like so:

import { fetchExchange, subscriptionExchange } from '@urql/core'
import { cacheExchange } from '@urql/exchange-graphcache'
import { defineUrqlClient } from '#urql/client'
import { createClient as createWSClient } from 'graphql-ws'

export default defineUrqlClient((ssrExchange) => {
  const setUpServer = () => {
    return [ssrExchange, fetchExchange]
  }

  const setUpClient = () => {
    const wsClient = createWSClient({
      url: `wss://${location.hostname}/api/graphql`
    })

    return [
      cacheExchange(),
      ssrExchange,
      fetchExchange,
      subscriptionExchange({
        forwardSubscription(request) {
          const input = { ...request, query: request.query || '' }
          return {
            subscribe(sink) {
              const unsubscribe = wsClient.subscribe(input, sink)
              return { unsubscribe }
            }
          }
        }
      })
    ]
  }

  const exchanges = process.server ? setUpServer() : setUpClient()
  const headers = useRequestHeaders(['cookie', 'authorization'])

  return {
    exchanges,
    fetchOptions: () => ({ headers })
  }
})

subscriptions ar working fine and I am change local state of users = ref([]) onDeleteAccount like so:

  await useSubscription(
    {
      query: gql`
        subscription onDeleteAccount {
          user: accountDeleted {
            id
          }
        }
      `
    },
    (_, { user }) => {
      users.value = users.value.filter((u) => u.id !== user.id)
    }
  )

now the record still exists in cache and reappears on client side navigation. So I added a handler directly in cacheExchange() like:

const cache = cacheExchange({
  updates: {
    Subscription: {
      accountDeleted: (result, args, cache, info) => {
        const { accountDeleted } = result;
        if (accountDeleted) {
          cache.invalidate({ __typename: 'Account', id: accountDeleted.id });
        }
      }
    }
  }
});

which perfectly removes that cache entry but now user in the local subscription handler is undefined.

Any hints or thoughts on that?