Options

Configure urql client with options under urql key of nuxt config.

endpoint

The absolute URL to connect to the graphql API.

nuxt.config
export default defineNuxtConfig({
  urql: {
    endpoint: "http://...",
  },
});

client [object]

Small subset of urql client options.

client.requestPolicy

The default request policy for requests.

client.preferGetMethod

Use HTTP GET for queries.

client [string]

  • default: urql.config

Path to the file (.json,.js,.ts) to configure client (fetch options, exchanges, ...).

Use the defineUrqlClient helper as the default export to return ClientOptions

urql.config.ts
import { fetchExchange } from "@urql/core";
import { cacheExchange } from "@urql/exchange-graphcache";
import { defineUrqlClient } from "#urql/client";

// use urql graphcache
const cacheConfig: GraphCacheConfig = {
  schema,
  keys: {
    // ...
  },
  resolvers: {
    // ...
  },
};

export default defineUrqlClient((ssrExchange) => {
  const exchanges = process.server
    ? [ssrExchange, fetchExchange]
    : [cacheExchange(cacheConfig), ssrExchange, fetchExchange];

  const headers = useRequestHeaders(["cookie", "authorization"]);

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

ssr

Options relative to the SSR exchange.

For more information go to urql server side rendering page.

ssr.key

  • default: __URQL_DATA__

Key name used by the SSR exchange to send its data in nuxt payload.

ssr.staleWhileRevalidate

Update data immediately after rehydration.

ssr.includeExtensions

Include graphql extensions in payload.