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

Configuring Apollo Playground and API on two different URL

By default, Apollo GraphQL middleware install the server in Express under the same URL. If you use the URL in the browser (GET), the playground loads. If you use the URL as a POST the data is returned. The website and the API are both using the same URL. It is problematic if you want the playground to use a particular authentication system (e.g., web-based) and the API to use an other (e.g., token approach). In this article, I will...

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

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