A Random Walk into GraphQL world

technotes
2 min readApr 20, 2021

First A couple Github Tricks

• Change a normal GitHub url like https://github.com/xunhuang/apollo-server-typescript-express add “1s” to github https://github1s.com/xunhuang/apollo-server-typescript-express allows you to browse the code in browser

• Change GitHub url to githubbox with “box” in the end, allows you to run that in Codesandbox.io https://githubbox.com/xunhuang/apollo-server-typescript-express

Basic GraphQL Server

While other technology choices exist, the Apollo-express-typescript combo seem to work well, especially in the nodejs world, for a basic setup.

  • Apollo server is very popular
  • Express makes apollo easier to use and it add routing
  • Typescript (over javascript) provides typing over javascript that can catch compile time error.

https://github.com/xunhuang/apollo-server-typescript-express

Graphiql-explorer

Import schema and help explore data set and build queries. The main advantage vs the builtin graphiQL is the ability to see what objects are in the name space and allow you to recursively select nodes and select attributes.

https://codesandbox.io/s/graphiqlexplorer-1lyc7

Originally from: https://github.io/graphiql-explorer-example/ changed the URL a working one.

One Graph

A graphQL service that aims to organize the world’s API under one namespace. Browse through:

https://www.onegraph.com/graphiql

GraphQL clients to consume

Basic client

apollo client/typescript/React , no code gen.

https://codesandbox.io/s/apollo-client-typescript-nocodegen-wfds8

Apollo client/typescript with code gen

Worth mentioning

https://githubbox.com/xunhuang/apolloclient-typescript-codegen

Worth mentioning in order to run the above in code sandbox, we have to add a one-liner for sandbox.config.json to inform code sandbox to treat this as a “node” environment as opposed to a “client environment”. What exactly is the difference? in client environment, they take care of everything so you don’t. You don’t get a Terminal in that environment. In order to execute the code gen like “npm run generate” in this project, you need to have the terminal to run it in.

Also this project uses the other code gen, not the default apollo client one, the one in use seems to do it in one shot, without separately downloading the schema.json file. A little cleaner in usage for code as well.

Next

  • figure out how mutation and subscription work
  • authentications
  • ORM
  • Pagination

--

--