patrickdesjardins.com patrickdesjardins.com

How to consume GraphQL in TypeScript and React

In this article I’ll cover two different approach concerning rendering information coming from a GraphQL server in React while being strongly typed. Approach 1: The normal fetch The first approach is the one I prefer because it is not intrusive. It is very similar of to do a normal REST Ajax call. It can be swapped from an existing fetch command that is using not GraphQL without having to change much. The approach is frontend...

patrickdesjardins.com patrickdesjardins.com

How to automatically generate TypeScript for consumer of your GraphQL

One strength of GraphQL is that it has types. In an ideal world, the consumer of the GraphQL would receive the payload strongly typed. The reason that it is not the case is natural. The data that is moving from the server to the client who invoked the query receives a JSON format that does not have any notion of type. However, the client who call the GraphQL know exactly which fields he wants to consume and GraphQL maps each queried...

patrickdesjardins.com patrickdesjardins.com

How to Curl a GraphQL API?

In the last few months, I have been implementing a GraphQL server in TypeScript and NodeJS using Apollo. You can build your query with the playground and see the result immediately. At the top, a “Curl” button generates a Curl command. However, it writes the command with many options that are not required. The generated command line has “–compressed” and “–data-binary” which might be fine for few people but in some...

patrickdesjardins.com patrickdesjardins.com

TypeScript with Strong Typed Action when using useReducer of React Hooks

The technic I will demonstrate in this article comes from what I was using with the traditional React and Redux. Now, with React Hooks we do not need to use Redux anymore but the same principles exist with the hook . I have witnessed many people struggling using TypeScript and Redux because they are passing strings around instead of a string literal. Often, the struggle I hear is around the boilerplate required as well as it is not...

patrickdesjardins.com patrickdesjardins.com

How to setup a TypeScript, NodeJS, Express Apollo Server to easy debugging with VsCode

There is a lot of keyword in the title but this is not a clickbait, we will setup without too much burden a simple configuration that will allow Visual Studio Code (VsCode) to hook into a GraphQL installation. The idea is that everytime a TypeScript file is saved that automatically the file is transpiled into JavaScript and to have Node reboot. The solution I propose can do the transpilation, the schema transportation and the restart...

patrickdesjardins.com patrickdesjardins.com

GraphQL Query with Argument

A part of me wish that the flexibility of GraphQL would extend further in term of parameter to a query. The reality is that the maintainer of a GraphQL service must provide a set of acceptable inputs. The rational is that GraphQL needs to query a services or any source of data in a known way. For example, if the REST endpoint takes an ID to fetch a specific entity, it would not make sense to take for input the NAME of the entity —...