Grats + Relay Example App

This is an example showing a minimal app using Grats and Relay together.

Getting Started

pnpm install
pnpm run start

The start script will run both the client and server in watch mode, including both Grats and Relay compilers.

It should also open a browser window to http://localhost:1234 where you can see the app running.

To see the GraphiQL Playground, go to http://localhost:4000/graphql in your browser.

Note: You may need to refresh the browser since the server may not be ready when the browser opens.

Packages Used

• Client
  • React - UI Framework
  • Relay - GraphQL Client
• Server
  • Grats - GraphQL Schema
  • Yoga - GraphQL Server
• Dev Setup
  • TypeScript - Typed JavaScript
  • Parcel - Bundler for client code
  • ts-node - Run TypeScript files directly
  • Prettier - Auto-format code
  • concurrently - Run multiple watch commands concurrently

The Setup

There are some things that we've done in this example to demonstrate Relay and Grats working well together.

• A combined watch command which runs all relevant tools and processes in watch mode at the same time:
  • Relay compiler
  • Grats compiler
  • Parcel bundler
  • Node server
• Added extensions.json and settings.json in .vscode/ to enable the Relay VSCode extension configure it to use Grats's "locate" command for click-to-definition.
• Ignored generated files in .prettierignore