Clients

SWR client

The SWR Client is our default client for React projects. It's a lightweight wrapper around the SWR library from Vercel.

Installation

Note: The client depends on SWR version 2.0.0.

1
npm i @wundergraph/swr swr

Configuration

Let's start by configuring WunderGraph. We're using templates.typescript.client to generate our base client that will be used to create typesafe hooks.

1
2
3
4
5
6
7
8
9
10
// wundergraph.config.ts
configureWunderGraphApplication({
  // ... your configuration
  codeGenerators: [
    {
      templates: [templates.typescript.client],
      path: '../generated',
    },
  ],
});

Create the hooks

WunderGraph comes with a powerful framework for generating code. Here we are creating fully typed SWR hooks based on the operations of our WunderGraph application.

1
2
3
4
5
6
7
8
// lib/wundergraph.ts
import { createClient, Operations } from '../generated/client';


import { createHooks } from '@wundergraph/swr';


export const client = createClient();


export const { useQuery, useMutation, useSubscription, useUser, useAuth } = createHooks<Operations>(client);

Hooks

useQuery

This hook accepts most useSWR Options except for key and fetcher.

1
2
3
4
5
6
7
const { data, error, isValidating, isLoading, mutate } = useQuery({
  operationName: 'Weather',
  input: {
    forCity: 'Berlin',
  },
  enabled: true,
});

Calling mutate will invalidate and refetch the query.

1
2
3
4
5
6
7
8
const { data, mutate } = useQuery({
  operationName: 'Weather',
  input: {
    forCity: 'Berlin',
  },
});


mutate();

useQuery (Live query)

You can turn any query into a live query by adding the liveQuery option.

1
2
3
4
5
6
7
const { data, error, isLoading, isSubscribed, mutate } = useQuery({
  operationName: 'Weather',
  input: {
    forCity: 'Berlin',
  },
  liveQuery: true,
});

useMutation

This hook accepts most useSWRMutation Options except for key and fetcher.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const { data, error, trigger } = useMutation({
  operationName: 'SetName',
});


await trigger({
  name: 'test',
});


trigger(
  {
    name: 'test',
  },
  {
    throwOnError: false,
  }
);

useSubscription

1
2
3
4
5
6
7
8
9
10
11
12
13
const { data, error, isLoading, isSubscribed } = useSubscription({
  operationName: 'Weather',
  input: {
    forCity: 'Berlin',
  },
  enabled: true,
  onSuccess(data, key, config) {
    // called when the subscription is established.
  },
  onError(data, key, config) {
    // called when the subscription failed to establish.
  },
});

useAuth

1
2
3
4
5
const { login, logout } = useAuth();


login('github');


logout({ logoutOpenidConnectProvider: true });

useUser

This hook accepts most useSWR Options except for key and fetcher.

1
const { data, error, isLoading } = useUser();

File upload

This hook accepts most useSWRMutation Options except for key and fetcher.

1
2
3
4
5
6
7
8
9
10
11
const { upload, data, error } = useFileUpload();


upload(
  {
    provider: 'minio',
    files: [new File([''], 'test.txt')],
  },
  {
    throwOnError: false,
  }
);
Previous
TypeScript Client
Next
Next.js

Was this article helpful to you?
Provide feedback

Edit this page