Multiple clients

Using multiple clients is frowned upon, but sometimes you don't have a choice. We have a way to define multiple clients for when you really need it.

Configuration

You have to configure multiple clients using urql.config

When supplying multiple client configurations, you are required to have one default configuration. The endpoint that you set in nuxt.config will be used for the default client, for any other clients you are required to supply a separate endpoint using the url key.

urql.config.ts

import { fetchExchange } from '@urql/core';
import { defineUrqlClient } from '#urql/client';

export default defineUrqlClient((ssrExchange) => {
  // In our example, we have to forward user authentication to the default client
  // but for the imagined cms, anonymous access is preferred for caching reasons
  const headers = useRequestHeaders(['cookie', 'authorization']);
  return {
    default: {
      exchanges: [ssrExchange, fetchExchange],
      fetchOptions: () => ({ headers }),
    },
    cms: {
      url: 'https://cms.test.com/graphql',
      exchanges: [ssrExchange, fetchExchange],
      preferGetMethod: true,
    },
  };
});

Usage

Component using multiple clients. The default client can be accessed with the vue composables, other clients need to use the client handle supplied from useUrqlClient.

<script setup lang="ts">
  // Default client can use `useQuery` as usual
  const { data: user } = await useQuery({
    query: gql`
    query user {
      name
    }
  `,
  });
  
  // Default client can also fetch the client handle without an argument, or with `"default"` is an argument
  const defaultClient = useUrqlClient();
  const profilePicQuery = gql`
  query profilePic {
    imageUrl
  }
  `;
  const { data: { profilePic } } = await defaultClient.query(profilePicQuery, {}).toPromise();
  
  // For non-default clients, the client handle needs to be explicitly fetched
  const cmsClient = useUrqlClient('cms');
  const cmsQuery = gql`
  query articles {
    id
    heading
    preamble
    body
  }
`;
  const { data: { articles } } = await cmsClient.query(cmsQuery, {}).toPromise();
</script>
<template>
  <header>
    <ul v-if="user?.name">
      <li>Welcome {{user.name}}</li>
      <li><img :src="profilePic.imageUrl"/></li>
    </ul>
    <a v-else href="/login">Login</a>
  </header>
  <section v-if="articles?.length">
    <article v-for="article in articles" :key="article.id">
      <h2>{{ article.heading }}</h2>
      <p>{{ article.preamble }}</p>
      {{ article.body }}
    </article>
  </section>
</template>

GuideUsage