ContextQMD
Back to Graphiql

Usage GraphiQL with Vite, React Router and `ssr: true`

examples/graphiql-vite-react-router/README.md

2.0.11.2 KB
Original Source

Usage GraphiQL with Vite, React Router and ssr: true

When using GraphiQL with React Router’s SSR mode, you need to mark the GraphiQL component as a client module by adding .client to the file name.

tsx
// graphiql.client.tsx
import { GraphiQL } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/toolkit';

const fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });

export const graphiql = <GraphiQL fetcher={fetcher} />;
ts
// route.ts
import type { FC } from 'react';
import type { LinksFunction, MetaFunction } from 'react-router';
import graphiqlStyles from 'graphiql/style.css?url';
import { graphiql } from './graphiql.client';

export const meta: MetaFunction = () => {
  return [{ title: 'API Explorer' }];
};

export const links: LinksFunction = () => {
  return [{ rel: 'stylesheet', href: graphiqlStyles }];
};

const Route: FC = () => {
  return graphiql;
};

export default Route;

Setup

  1. yarn dev to start Vite dev server.
  2. yarn build to build production ready transpiled files. Find the output in dist folder.