Remix Example

npx create-wundergraph-app --example remix

// 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',
    },
  ],
});

// lib/wundergraph.ts

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

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

export const client = createClient();

export const createClientFromCookies = (request: Request) => {
  const cookieHeader = request.headers.get('Cookie');

  const client = createClient({
    extraHeaders: {
      cookie: cookieHeader ?? '',
    },
  });

  return client;
};

// Use these hooks for any client side operations
export const { useQuery, useMutation, useSubscription, useUser, useAuth } = createHooks<Operations>(client);

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

// app/routes/index.tsx
import { json } from '@remix-run/node';
import { useCatch, useLoaderData } from '@remix-run/react';
import { client } from 'lib/wundergraph';

export const loader = async () => {
  const res = await client.query({
    operationName: 'Dragons',
  });

  if (res.error) {
    throw json(res.error);
  }

  return res.data;
};

export function CatchBoundary() {
  const caught = useCatch();

  return (
    <div>
      <h1>Error!</h1>
      {JSON.stringify(caught)}
    </div>
  );
}

export default function Index() {
  const { spacex_dragons } = useLoaderData<typeof loader>();

  return (
    <code className="p-3" data-testid="result">
      {JSON.stringify(spacex_dragons, null, 2)}
    </code>
  );
}