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) or higher
• 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 - interactive graph.

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 Vscode 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.

For Vscode you can attach GRAPHQL server to the debug panel which will make it possible to have breakpoints while running the whole application. For other editors just whatch port 7001 for inspection results.

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. Please look carefully at ./packages/server/src/server.ts#37 and put comment back when really deploying for production, then you need to turn off introspection and interactive graph, they are now only turned on for the demonstration effect.

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
3. ask apollo team if graphiql can be offline too, now it loads resources from cdn.jsdelivr.net

ARTICLES

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

NON-BELIEVERS

There are always teams resistent to pickup "new" technologies. If they want they are still able to consume us as rest endpoints with the same codebase behind it.

For example our application also gives the following endpoint: locally: /api/get-product/9200000111963040 or online demo

See open-api its auto generated with help of SOFA

VSC plugins

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