@teages/nuxt-urql-client

A simple graphql (urql) client for Nuxt.

• ✨  Release Notes
• Document: WIP

Setup

1. Add @teages/nuxt-urql-client and graphql dependency to your project

NOTE: graphql is a peer dependency of @teages/nuxt-urql-client and must be installed separately.

1# Using pnpm
2pnpm add -D @teages/nuxt-urql-client graphql
3
4# Using yarn
5yarn add --dev @teages/nuxt-urql-client graphql
6
7# Using npm
8npm install --save-dev @teages/nuxt-urql-client graphql

2. Add @teages/nuxt-urql-client to the modules section of nuxt.config.ts, and configure it:

See module options for more options.

1export default defineNuxtConfig({
2  modules: [
3    '@teages/nuxt-urql-client'
4  ],
5  urqlClient: {
6    clients: {
7      default: {
8        url: '/graphql',
9      },
10    },
11  },
12})

We suggest to use @teages/nuxt-gql-client-codegen to generate types for your graphql queries.

Usage

1<script setup lang="ts">
2const query = gql(`
3  query test {
4    hello
5  }
6`)
7
8const { data, error } = useAsyncQuery(query)
9
10// same as
11// const { data } = useAsyncData(() => useQuery(query))
12</script>
13
14<template>
15  <div v-if="!error">
16    {{ data }}
17  </div>
18  <div v-else>
19    {{ error }}
20  </div>
21</template>

Development

1# Install dependencies
2npm install
3
4# Generate type stubs
5npm run dev:prepare
6
7# Develop with the playground
8npm run dev
9
10# Build the playground
11npm run dev:build