Graphql

Best introduction: link

Relay vs Apollo client

Both are clients of graphql in React.

Useful tools

• chrome plugin: GraphQL Network Inspector

Apollo client URI

Recently, I took a look at the Apollo client links documentation. The uri parameter caught my eyes. It says

uri: The URL of the GraphQL endpoint to send requests to. Can also be a function that accepts an Operation object and returns the string URL to use for that operation.
The default value is /graphql.

I was like how a relative path /graphql tells the address of the graphql server. Then I realized that if the query happens on http://www.example:9000/a/b/c, then a uri /graphql means http://www.example:900/graphq. Underneath, Apollo client uses fetch to call this endpoint. The key distinction is between URI and URL. For example, (your address, your name) uniquely identified yourself. This is RUL. (Your name) is URN, i.e., uniform resource name. While, URI is a super set of URN and URL. It can either be a relative name or path + name. That is why you can either pass /graphql or http://www.example:9000/graphql to the Apollo client HttpLink constructor.

See https://danielmiessler.com/study/difference-between-uri-url/

graphql-code-generator

GraphQL Code Generator is a CLI tool that can generate Typescript types out of a GraphQL schema and operations (query/ mutation/ subscription, and fragment). Graphql code generator needs a schema file to generate strong typed queries. This schema file can be obtained by directly querying the /graphql endpoint. The call sequence is

graphql-codegen-cli/bin.ts -> generate-and-save.ts:generate ->
  -> codegen.ts:executeCodeGen -> config.ts:loadSchema

Then it jumps to another pacakge graphql-config, which has a few overloaded loadSchema function. Each corresponds to a different loader. See https://www.graphql-config.com/docs/library/loaders for more details about how /graphq endpoint is used to get the schema. It contains the graphql DSL parser code, which is quite interesting.

Graphql code generator has many plugins. One is Typescript-operations. It will find all graphql code segments in the files specified in documents and generate the corresponding typescript. The files not need to be .graphql it can be .ts or tsx, as long as it has graphql code segments.

graphql-core

This weekend (2022/10/16) I spent some time reading graphql core code in python and got a deeper understanding about how graphql works. Basically, it is a DSL with a parser and an executor.

The executor part is interesting. Basically, it is a recursive call that traverses the ast. See resolve_function and the default resolver. From the implementation, I finally understand what the first two parameters (root, info) in graphql resolver mean.

Another interesting part is retrospection. Graphql uses a visit pattern to traverses the abstract syntax tree. Checkout the validation folder for examples.

Customization is doable too. then execute_graphql function allows you to provide a custom root. Also, schema allows you to provide user defined types.