This example demonstrates using the Fetch API to query a GraphQL endpoint. It also makes use of a GraphQL Code Generator which introspects the GraphQL API in order to generate types that can be used in our useLoaderData hooks for strong, generated types.

• Setup the GRAPHQL_API environment variable
  • See the Remix docs for some suggested patterns
• Run npm install
• And start the example with npm run dev
• Visit http://localhost:3000 in your browser.

Open this example on CodeSandbox:

This example makes use of Remix Resource Routes to fetch data from a sample GraphQL API in addition to exposing that data via a JSON API.

The relevant files:

• app/routes/api/characters.tsx & app/routes/api/character.tsx
  • These are the Remix Resource Routes that expose data via a JSON API
  • They fetch from the GraphQL API using the Fetch API
• app/routes/_index.tsx
  • This route fetches a list of characters
  • It's able to re-use the loader used by our API directly 🎉
• app/routes/character/$id.tsx
  • This route fetches a single character from the API we've exposed
  • The loader makes use of a fetch and URL params
• codegen.yml
  • A configuration file for the GraphQL Code Generator
  • "Generate anything from GraphQL schema / operations!"

• Remix Resource Routes
• GraphQL
• GraphQL Code Generator
• Sample API | Rick & Morty