@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.

# Using pnpm
pnpm add -D @teages/nuxt-urql-client graphql

# Using yarn
yarn add --dev @teages/nuxt-urql-client graphql

# Using npm
npm 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.

export default defineNuxtConfig({
  modules: [
    '@teages/nuxt-urql-client'
  ],
  urqlClient: {
    clients: {
      default: {
        url: '/graphql',
      },
    },
  },
})

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

Usage

<script setup lang="ts">
const query = gql(`
  query test {
    hello
  }
`)

const { data, error } = useAsyncQuery(query)

// same as
// const { data } = useAsyncData(() => useQuery(query))
</script>

<template>
  <div v-if="!error">
    {{ data }}
  </div>
  <div v-else>
    {{ error }}
  </div>
</template>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build