Vite + SWR

Vite + SWR example demonstrates the power of code generation, when it comes to integrating WunderGraph with data fetching libraries like SWR .

Configuration

Let's start by configuring WunderGraph.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// wundergraph.config.ts
const spaceX = introspect.graphql({
  apiNamespace: 'spacex',
  url: 'https://spacex-api.fly.dev/graphql/',
});


configureWunderGraphApplication({
  apis: [spaceX],
  server,
  operations,
  codeGenerators: [
    {
      templates: [templates.typescript.client],
      path: '../generated',
    },
  ],
});

What's notable here is that we're using templates.typescript.client to generate our base client that is used by SWR @wundergraph/swr package.

Next up is setting up the SWR hooks.

1
2
3
4
5
6
7
8
9
// 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);

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.

Define an Operation

1
2
3
4
5
6
7
# .wundergraph/operations/Dragons.graphql
query Dragons {
  spacex_dragons {
    name
    active
  }
}

Run a Query

1
2
3
4
5
6
7
8
9
10
11
import { useQuery } from '../lib/wundergraph';


const App = () => {
  const { data, error } = useQuery({
    // This is allows conditional fetching https://swr.vercel.app/docs/conditional-fetching
    enabled: true,
    operationName: 'Dragons',
  });
  return <div>{JSON.stringify(data)}</div>;
};
export default App;

Run a LiveQuery

1
2
3
4
5
6
7
8
9
10
import { useQuery } from '../lib/wundergraph';


const App = () => {
  const { data, error } = useQuery({
    operationName: 'Dragons',
    liveQuery: true,
  });
  return <div>{JSON.stringify(data)}</div>;
};
export default App;

Run Mutations

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useMutation } from '../lib/wundergraph';


const App = () => {
  const { data, error, trigger } = useMutation({
    operationName: 'Dragons',
  });
  const onClick = () => {
    trigger({
      name: 'test',
    });
  };
  return (
    <div>
      {JSON.stringify(data)}
      <button onClick={onClick}>Click me</button>
    </div>
  );
};
export default App;

Run Subscriptions

1
2
3
4
5
6
7
8
9
import { useSubscription } from '../lib/wundergraph';


const App = () => {
  const { data, error } = useSubscription({
    operationName: 'Dragons',
  });
  return <div>{JSON.stringify(data)}</div>;
};
export default App;

Authentication

Note: Logout() will trigger a refetch of the user.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { useAuth, useUser } from '../lib/wundergraph';


const App = () => {
  const { login, logout } = useAuth();
  const { data, error } = useUser();
  // Conditional fetching
  // const { data, error } = useUser({ enabled: true });
  return (
    <div>
      {JSON.stringify(data)}
      <button onClick={() => login('github')}>Login</button>
      <button onClick={() => logout()}>Login</button>
    </div>
  );
};
export default App;

File upload

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useFileUpload } from '../lib/wundergraph';


const App = () => {
  const { upload, data, error } = useFileUpload();
  const onUpload = () => {
    upload({
      files: [new File([''], 'test.txt')],
    });
  };
  return (
    <div>
      {JSON.stringify(data)}
      <button onClick={onUpload}>Upload</button>
    </div>
  );
};
export default App;

Global Configuration

You can configure the hooks globally by using the SWRConfig context.

In case the context configuration isn't working, it's likely due to multiple versions of SWR being installed or due to how PNPM or Yarn PnP link packages. To resolve this you can import SWR directly from @wundergraph/swr to make sure the same instance is used.

1
import { SWRConfig, useSWRConfig } from '@wundergraph/swr';

Learn more

Deploy to WunderGraph Cloud

The easiest way to deploy your WunderGraph app is to use WunderGraph Cloud. Enable the Vercel integration to deploy the Vite frontend to Vercel.

Deploy to WunderGraph
Previous
Astro + Relay
Next
Vite + Solid.js

Was this article helpful to you?
Provide feedback

Edit this page