Nuxt + Vue Query Example

The Nuxt example demonstrates the power of code generation, when it comes to integrating WunderGraph with frontend frameworks like Nuxt.

Configuration

Let's start by configuring WunderGraph.

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


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

WunderGraph comes with a powerful framework for generating code. In this case, we're generating a generic TypeScript client that we can hook-up with Nuxt.

Define an Operation

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

Configure Nuxt, Wundergraph and Vue Query

Most of the configuration is done in a Nuxt plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import type { DehydratedState, VueQueryPluginOptions } from '@tanstack/vue-query';
import { VueQueryPlugin, QueryClient, hydrate, dehydrate } from '@tanstack/vue-query';
import { useState } from '#imports';


import { createHooks } from '@wundergraph/vue-query';
import { createClient, Operations } from '../.wundergraph/components/generated/client';


export default defineNuxtPlugin((nuxt) => {
  const vueQueryState = useState<DehydratedState | null>('vue-query');


  const queryClient = new QueryClient({
    defaultOptions: { queries: { staleTime: 5000 } },
  });
  const options: VueQueryPluginOptions = { queryClient };


  nuxt.vueApp.use(VueQueryPlugin, options);


  if (import.meta.server) {
    nuxt.hooks.hook('app:rendered', () => {
      vueQueryState.value = dehydrate(queryClient);
    });
  }


  if (import.meta.client) {
    nuxt.hooks.hook('app:created', () => {
      hydrate(queryClient, vueQueryState.value);
    });
  }


  const client = createClient(); // Typesafe WunderGraph client
  const wgraph = createHooks<Operations>(client);
  return {
    provide: {
      wgraph,
    },
  };
});

This properly setup Nuxt and Vue Query with server side rendering and hydration of the client.

Using from Nuxt

You can access the wundergraph client from vue files using the useNuxtApp hook and grabbing the property that you provided in the nuxt plugin (prefixed by a $).

1
2
3
4
5
6
7
8
9
<script setup>
  const {
    $wgraph: { useQuery },
  } = useNuxtApp();


  const dragons = useQuery({
    operationName: 'Dragons',
  });
</script>

Your operations will be compiled into RPC endpoints, so all you have to do is to use the useQuery hook and call your newly created API.

Learn more

Deploy to WunderGraph Cloud

The easiest way to deploy your WunderGraph app is to use WunderGraph Cloud.

Deploy to WunderGraph
Previous
Next.js Todos
Next
TypeScript ORM

Was this article helpful to you?
Provide feedback

Edit this page