Next.js + React Query Example

// wundergraph.config.ts
const spaceX = introspect.graphql({
  apiNamespace: 'spacex',
  url: 'https://spacex-api.fly.dev/graphql/',
});

const myApplication = new Application({
  name: 'app',
  apis: [spaceX],
});

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

# .wundergraph/operations/Dragons.graphql
query Dragons {
  spacex_dragons {
    name
    active
  }
}

npm i @wundergraph/react-query @tanstack/react-query

import { createClient, Operations } from '../components/generated/client';

import { createHooks } from '@wundergraph/react-query';

export const client = createClient();

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

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

export default function App({ Component, pageProps }) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />
    </QueryClientProvider>
  );
}

import { NextPage } from 'next';
import { useQuery } from '../lib/wundergraph';

export default function Home() {
  const dragons = useQuery({ operationName: 'Dragons' });
  return <div>{JSON.stringify(dragons.data)}</div>;
}