GraphQL by Example

This repo showcases how to build a full-stack server/client GraphQL app via Apollo, React, and TypeScript, and accompanies a presentation that can be viewed here.

Examples include building a GraphQL schema around a local REST server pointed at a database, as well as integrating external service endpoints in an API-gateway-like fashion.

The source within is meant to help those curious about GraphQL get started quickly through clear and simple examples, but note that the patterns are not exhaustive; GraphQL is a large and evolving topic, and as such many details have been intentionally left blank. Check out Apollo's excellent documentation to learn more.

Setup

First, clone the repo locally and run:

$ yarn setup  # or npm run setup

This will install all of the necessary dependencies for the server and client portions of the app. Once that's complete, run:

$ yarn start # or npm start

This will

• Boot the web-app at http://localhost:3000
• Launch a backend server at http://localhost:4000
• Open up a GraphQL Playground interface at http://localhost:4000/graphql

App Structure

The app is composed of two sub-apps: a server and a client.

Server

The server is built with Apollo Server and compiled via Backpack, a create-react-app-like zero-config server-side build pipeline.

Changes to source-code are automatically hot-reloaded via Webpack, so restarts aren't required.

Note that TypeScript support has been added by adding a custom .babelrc file and updating backpack.config.js's Webpack setup to support .ts files via babel-loader.

Client

The client is built with Apollo Client and compiled via Create React App.

The UI is split across a few different routes. It shows how we can easily incorporate calls to external service endpoints -- in this case Penguin's public REST API -- into our schema. And in the below, we're using GraphQL to communicate with our local server's database and using mutations to add new records which we can then retrieve via a query:

Additionally, this app demos some common UI / dev patterns, such as

• TypeScript
• Design System via Rebass and Styled System
• Routing via Reach Router
• CSS-in-JS via Styled-Components