shotor / graphql-modules-app

TypeScripted Apollo GraphQL Server modules and React modules

GraphQL-Modules TypeScript Server & NextJS React application

Demonstration application for showcase utilizing Graphql-modules which is using data from BOL.com Open Api for the server (also complete mocked version is available). You will find a sample with products and dataloader. The React web application is using NextJS, GraphQL Codegen by Dotan and Apollo hooks. More background information about this app is in the wiki. I would like to thank The Guild for their awesome GraphQL toolchain.

PRE-REQUISITES

• Node dubnium (required)
• Facebook watchman (only for development) (optional)
• Get your free API key from open api bol.com (optional)

INSTALL

1. yarn
2. bash setup.sh sets correct local .env file for server part with mock mode as default (it is possible to set your bol.com api key there as well (then also set MOCK_API=off), the only difference will be using a real datasource or not!)
3. Apollo vsc extension (optional)

ONLINE DEMO

Both Heroku containers spin down when no activity, please be patient. graphql-schiphol.herokuapp.com/ which points to the graphql endpoint at graphql-server.

STRUCTURE

.
├── /config/            # some configuration for build scripts
├── /packages/          # 2 applications
│   ├── /app/           # React NextJS isomorphic application
│   └── /server/        # Apollo GraphQL server created with graphql-modules
├── /test/              # end-to-end tests

DEVELOPMENT

Now when you followed the install part (and looked at point 2, its nicer with a real datasource) you can simply run yarn start. It will spin up the GraphQL server and the React application. Please look at the VSC plugins below for editor happiness.

It is also possible to just play with only the server part with MOCK_API=on yarn start:dev:server, which spins up the graphql server in mocked mode. Or BOL_API_KEY=*** yarn start:dev:server which spins it up in non mocked mode when you have an open api bol.com key.

PLAYGROUND

At local-server or demo-server heroku you will see dataloader taking care of eventually requesting two products from the API in one single call. Using the following query:

{
  foo: getProduct(id:"9200000111963040") {
    id
    title
  }
  bar:getProduct(id:"9200000111963040") {
    id
    title
    rating
  }
  shizzle:getProduct(id:"9200000108695538") {
    title
    rating
    shortDescription
  }
}

You can find product and product category id's on the real bol.com website to play further.

CODE DEMONSTRATION

Product is explained in:

• graphql module the injectable Product module
• frontend module the client component

PRODUCTION

By default after install the build will take place and the start command is running this build.

CONFIGURATION

Environment vars for development (set them in CI for production).

'.env' file inside './packages/server':

Important: You can set MOCK_API to 'on' in case you don't have access to bol.com api. Then the server will use stub data

BOL_API_KEY=***
NODE_ENV=development
MOCK_API=on|off
ENGINE_KEY=optional-apollo-engine-key-overhere REMOVE WHEN NOT AVAILABLE
ALLOWED_ORIGIN=optional-not-needed-dev-mode REMOVE

'.env' file inside './packages/app'

This file is optional, the dev setting is the default.

GRAPHQL_ENDPOINT=endpoint-your-graphql-server-will-run

TODO

1. Add more tooling (things like storybook etc etc)
2. yarn upgrade-interactive --latest

ARTICLES

• WhatsApp-Clone-server, WhatsApp-Clone-Client-React and tutorial
• Paypal Graphql
• Airbnb luxery homes
• https://www.graphqlweekly.com/
• GraphQL HQ

VSC plugins

• vscode-apollo for autocomplete in app
• eslint including apollo linting