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. 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 (); < template > < header > < ul v-if = " user?.name " > < li >Welcome {{user.name}} < li >< img : src = " profilePic.imageUrl " /> < a v-else href = "/login" >Login < section v-if = " articles?. length " > < article v-for = " article in articles " : key = " article.id " > < h2 >{{ article.heading }} < p >{{ article.preamble }} {{ article.body }} html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}

Nuxt URQL