Antoine Lin

## Introduction

Recently, I had to migrate my Apollo Client stack to another GraphQL library. In facts, the way the library was handling tree parsing and request discovery was the source of performances issues viewable on the Google lighthouse scores, preventing the proper indexing on Google [SERP](https://www.wordstream.com/serp). The library is heavy, and has too many tools that I don't use.

As a replacement, I opted for **Urql**. This library is 1) based on observables, 2) very light, 3) providing such an opposite approach of the Apollo's one: instead of an "all in one" tool ready for any kind of use case I would have, I compose myself my bunch of tools with additional modules to fit my needs. This approach leaves me with the ability to finely control what is bundled.

One of the features of Apollo Client that I really like is the `Link` composition, allowing me to create multiple `HttpLink` for multiple data endpoints (API). If you are familiar to GraphQL, you may already wanted to query data in parallel of you main GraphQL API endpoint.
Unfortunately, I haven't found any information online explaining how to do the same thing using Urql. Most of the answers were "why use multiple sources, it's not a GraphQL way" (which is true, but I don't always have the time to create a GraphQL server to federate multiple GraphQL endpoints).

So, if you want to know if it is possible to manage **multiple GraphQL API with Urql** and how to do it, you have found the right post.

## Requirements: install required packages

Urql is a GraphQL client based on a collection of blocks that connect to each other. As I presented in the introduction, this is what allows us to compose the exhaustive list of tools we will use. Think of these modules as operators in the world of observables. And good news, this is exactly on what the library is built.

These blocks, called `exchanges`, bring the parts that modify the requests to the GraphQL servers.

The order is important and must be logical according to the transformations you want to apply. According to the [official documentation](https://formidable.com/open-source/urql/docs/advanced/authoring-exchanges/#synchronous-first-asynchronous-last), you should always start with synchronous tasks and end with asynchronous ones.

When you configure an Urql client, you have access, by default, to certain exchanges:

- `dedupExchange` : ensures that identical queries are not executed twice
- `cacheExchange` - cache the result of the requests
- `fetchExchange`: takes care of executing the HTTP request (using the `fetch` API)

For our problem, we will need an `exchange` that is not present in the Urql *core*: `authExchange`.

Basically, it allows us to easily configure an authorization system (for example via JWT), but it will mainly be used to **change the context of our request** on the fly.

Let's start by installing:

```bash
# With Yarn
$ yarn add @urql/exchange-auth

# With NPM
$ npm install @urql/exchange-auth
```

Then we import it:

```typescript
import { authExchange } from '@urql/exchange-auth
```

## Creating the GraphQL client

This function should return the Urql client creation method with the correct configuration parameters and the different exchanges you wish to implement:

```typescript
import { Client, createClient } from 'urql'

export function createGraphqlClient(): Client {
  return createClient({
	url: 'your-api-url', // The default client url
	fetchOptions: {
	  credentials: 'same-origin',
	  method: 'GET',
	  headers: {
	    Authorization: `Bearer ...`,
	    'Content-Type': 'application/json',
	  }
	},
	preferGetMethod: true,
	exchanges: [],
  })
}
```

Then we just need to add "basic" exchanges ([read more](https://formidable.com/open-source/urql/docs/architecture/#the-exchanges)):

```typescript
import { ..., dedupExchange, cacheExchange, fetchExchange } from 'urql'

export function createGraphqlClient(): Client {
  return createClient({
		//...
		exchanges: [
			dedupExchange,
			cacheExchange,
			fetchExchange
		],
  })
}
```

## Add authorization exchange

Once the client is configured with the basic options, we can add `authExchange`.

The overall idea is to copy the way we would use with Apollo Client (using `Link`) to manage multiple API endpoints. (If you want to know more about this method, I personally use Jamal Mashal's post you can find [here](https://www.jamalx31.com/tech-posts/using-apollo-with-multiple-graphql-endpoints)).

To summarize, we will add to the context of each request an optional `clientName` key, which will be used to add modifications to the rest of the context (request URL, headers if an authentication token is needed)

The `authExchange` takes as parameter an object that requires at least 2 keys: `addAuthToOperation` and `getAuth`.

About `addAuthToOperation` :

```typescript
addAuthToOperation({ operation }) {
  // if clientName is not setted in context, we return the current operation
  if (!operation.context.clientName) {
    return operation
  }
		
  const { clientName, fetchOptions } = operation.context
  const options = typeof fetchOptions === 'function' ? fetchOptions() : fetchOptions ?? {}
		
  switch (clientName) {
    case 'endpoint-a': {
      const headers = {
        ...options.headers,
        Authorization: `Bearer ...`,
      }
		
      const context = {
        ...operation.context,
        url: 'endpoint-a-url',
        fetchOptions: {
          ...options,
          headers,
        }
      }
		
      return makeOperation(operation.kind, operation, context)
    }
    case 'endpoint-b': {
      const headers = {
        ...options.headers,
        Authorization: `Bearer ...`,
      }
		
      const context = {
        ...operation.context,
        url: 'endpoint-b-url',
        fetchOptions: {
          ...options,
          headers,
        }
      }
		
      return makeOperation(operation.kind, operation, context)
    }
    default: {
      throw new Error(`Unexpected object: ${clientName}`)
      return operation
    }
  }
}
```

Add as many cases as data sources needed.  
  
For `getAuth` in our example it will be simple:

```typescript
getAuth: null
```

If needed, you can add logic, like retrieving a token with a promise for example:

```typescript
getAuth: async () => {
  const token = await getToken()

  return { token }
},
addAuthToOperation({ authState, operation }) {
  const token = authState.token
  // ...
}
```


## Request example with GraphQL client

To use the correct API with the GraphQL client:

```typescript
function getDataFromEndpointA() {
  const { data } = await client.query(myQueryForEndpointA, {}, {
    clientName: 'endpoint-a',
  }).toPromise()

  return data
}

function getDataFromEndpointB() {
  const { data } = await client.query(myQueryForEndpointB, {}, {
		clientName: 'endpoint-b',
  }).toPromise()

  return data
}
```

## Request example with React hooks

To use the right source through an Urql client integration with React hooks:

```typescript
const [{ error, data, fetching }] = useQuery(
  myQueryForEndpointA,
  {} // this object contains GraphQL request variables,
  context: useMemo(() => ({
    clientName: 'endpoint-a'
  }), []),
})

const [{ error, data, fetching }] = useQuery(
  myQueryForEndpointB,
  {} // this object contains GraphQL request variables,
  context: useMemo(() => ({
	  clientName: 'endpoint-b'
  }), []),
})
```

Note: remember to use `useMemo` when defining the context to avoid going on an infinite loop with React. ([see the *issue* on Github](https://github.com/FormidableLabs/urql/issues/507))

## Conclusion

You should now have enough information to set up an Urql client that handles multiple GraphQL API endpoints.

Notes:
- the current code is not 100% type safe since the `clientName` key does not exist in the Typescript typing of the Urql context,
- adding a data source increases the complexity in your typing management if you use `graphql-codegen`. We'll talk about that in a future post.

Just for you I created a [Gist](https://gist.github.com/toinelin/f061e812b1746119000ec572bc5b53eb) to summarize all the code snippets I wrote on this post. Do not hesitate to add a comment or to give your feedback on it.

And if you have any questions (or if you wanna talk) you can contact me on [Twitter](https://twitter.com/vahilloff).


How to use multiple GraphQL endpoints with Urql

Launching of my blog!

## Introduction

The story I'd like to tell you begins in 2009. This year, the new flagship of the Call of Duty license, Modern Warfare 2, was released. With this opus, a huge ecosystem of gamers and enthusiasts who create and share content online begans to grow, and if you were, like me, into this universe, you might remember trickshots, killfeeds and the Skype conversations with most than 200 peoples. If you weren't, let me introduce you to that time.

Call of Duty, or COD, is a FPS, First Person Shooter, where you play and control a little soldier who makes war. In this game, there is a particular mode that consists of competing online, solo or whith your teams, against players from around the world.
And in 2009, that's all anyone is talking about. In the schoolyard, on the Internet, everyone wants to see or share their actions, explain how to be the best or show why their weapons and accessories combinations are the strongest. Peoples begins to create teams, records their achievements and compete against each other through fragmovies on YouTube.

I wanted to shine in that community and represent one of those big teams. But at the time, I wasn't particularly good at the game nor comfortable to talk in front of a camera. How should I do ?
My strength was graphic production. Photoshop, After Effect, Cinema4D, it was my main hobby. Good, since there was a huge need for this kind of profile to create content published on social networks, it was my entry ticket.

If I tell you this story, it's because it's in 2009 that I discovered the entrepreneurial spirit in me. It was first a passion, then a driving force behind my professional career choices, and today, it is what allows me to pay my bills.

## Who I am ?

I grew up in a small town in Seine-et-Marne, France, called Magny le Hongre, close to Disneyland Paris (the precision is important for the geographical situation, a matter of habit when you grow up in these areas). I studied in a public high school near the Val d'Europe shopping center before joining HETIC in 2014 after obtaining my scientific degree.

I followed the "Grande École" training, over 5 years, which delivers a level I master's degree, which I obtained in 2019.

> HETIC trains experts in digital engineering (Bachelors & Masters) capable of managing the operational imperatives of a large-scale project, of thinking as an entrepreneur and of participating in the global digital transition in France and internationally. [For more information](https://www.hetic.net/)

After reading this post's introduction you may have trouble finding the connection with the title of my blog. In fact, when I joined HETIC, I was convinced that I was heading for a graphic design career. It's in my second year of school that I discovered web development with [Bruno Simon](https://bruno-simon.com) as a teacher, and since then, it's been a great love story between code lines and me.

In late 2015, I opened my self-company to work on real projects. I found my main clients in the video game market and especially in e-sports. I had the opportunity to design and develop several applications, including marketing showcases or e-commerce websites, for companies like [Omen by HP](https://www.omen.com/fr), [Team Vitality](https://vitality.gg/fr) the biggest French e-sport structure, or influencers like the most titled e-sport player in France, [Gotaga](https://gotaga.tv).

![Team Vitality website, vitality.gg, onligne from 2018 to late 2019](https://www.datocms-assets.com/34579/1621362983-vitality-gg.jpg?w=1680&h=1051)

Following my studies, I turned this secondary activity into a full-time job and closed my self-company for an independent legal entity. Since 2019, I work with the biggest French-speaking influencers in the gambling market as *Head of Tech* and manager, leading them in all their online projects.

## What I do

I'm mainly a front-end developer, which is the person who creates web experiences (from creating the user journey, to connecting applications with services, to integrating interfaces). But I also do a lot of devops, and some back-end stuff. On a daily basis, I juggle between ReactJS with NextJS under TypeScript for the front-end, GraphQL with Prisma and GraphQL Nexus for the back-end, Kubernetes for the devops and Nx workspace for my mono-repositories management. As a fan of reactive and functional paradigms, I also work a lot with RxJS. And all this is automated using GitLab CI/CD.

I told you I was a developer, but in reality, I do a little more than that. I'm also involved in product design, internal processes and management structure. I still do graphic production from time to time (which allows me to use the skills I learned in high school in my daily life). Today, I also manage developers with the work that's relates to: I create technical specifications, manage daily and weekly follow-up meetings, do some code feedback and manage roadmap follow-up.

In my spare time, I like playing video games, bother my frenchy (her names Nala) and I try to take more time for books reading.

![Nala, my little frenchy](https://www.datocms-assets.com/34579/1619034150-img4914.jpg?w=1008&h=735)

After reading these lines, I know what you are thinking and you are right. I do a lot of stuff. For me, it's mostly a manner of passion and a lot of energy, energy that I would like to share, as well as my discoveries, by writing on this blog, do live streams on my [Twitch](https://twitch.tv/vahill), and videos on my [YouTube](https://youtube.com/c/Vahill) channel. Feel free to come and follow me on my numerous networks and add this website to your bookmarks. Moreover, If I managed to pique your curiosity and you would like to know more about me, or maybe to share a virtual coffee, I opened this tech oriented [Discord server](https://discord.gg/9kFtqW9H), you're warm welcome!

## Timeline

- #### 2021
- ✅ I launched my blog
- ✅ I get new responsibilities, other developers join me and I become tech lead 🙌🏻
- ✅ I started to do live streams about tech and video games on [Twitch](https://twitch.tv/vahill)

- #### 2020
- ✅ Following my work-study contract, I continued to work in a 3/5 weekly basis contract with PandaScore. At the same time, I grew up my freelance activity and I got contracts in the gambling market.
- ✅ In January, my little girl joins the family 🐶
- ✅ In February, friends of mine gave up their apartment and we got the keys back. So we moved to our current home, bigger (so more space for the dog), in a recent building with parking slot and elevator. And this, just before the first covid-19 crisis 🍀
- ✅ In July, and at the end of my contract, I leaved PandaScore to give a try to my entrepreneurial adventure in a full time way.
- ✅ In August, I put my self-company on hold and opened a bigger, and more suited structure.

- #### 2019
- ✅ I'm joining the company PandaScore as a front-end developer in a professionalizing contract. PandaScore is a Parisian *startup* and a major player in the aggregation of real-time data on electronic sports competitions matches. Data that allows them today to sell betting odds on e-sport markets. You are a bookmaker and you want to add e-sport markets to your offer? Go ask PandaScore about it!
- ✅ With Camille, we move into our first apartment 🚀
- ✅ I got diplomed at HETIC "Expert in digital communication engineering and management", Level 7 title (Master 2) registered in the Répertoire National des Certifications Professionnelles after 5 years of study.
- ✅ Zoom! Vroom ! I bought my first motorcycle, a Kawasaki Z650 🤯

- #### 2018
- ✅ Published the portfolio [michaelzaccardi.com](https://michaelzaccardi.com), developed for my school friend. Developed in WordPress with the [Wordplate](https://github.com/wordplate/wordplate) framework. The project received an honorable mention from Awwwards. And a French Design Index.
- ✅ Publication of the online store shop.vitality.gg. Project I developed as a freelancer under Shopify. The site remained online until 2019, replaced by the current version released following their [fundraising](https://www.lequipe.fr/Esport/Actualites/Vitality-une-levee-de-fonds-et-des-locaux-pour-le-principal-club-esportif-francais/1077857) and developed by an external agency.
- ✅ I'm joining BlueBoard as intern (acquired by the Channel Advisor group in 2020) as a ReactJS front-end developer. BlueBoard is a Paris-based startup that provides an e-commerce monitoring solution for brands and manufacturers that sell through online retailers. You sell online and you want to know in one place what is the state of your stock and what are the different customer feedbacks on your entire distribution network? BlueBoard is the right service for you!
- ✅ Publication of the online store store.gotaga.tv. Project that I developed as a freelancer under Shopify. The site has been online until 2019.

- #### 2017
- ✅ Released vitality.gg! My first major project with [Team Vitality](https://vitality.gg/). Developed with WordPress (custom theme) and hosted on AWS using Docker. The site remained online until 2019, replaced by the current version released following their [fundraising](https://www.lequipe.fr/Esport/Actualites/Vitality-une-levee-de-fonds-et-des-locaux-pour-le-principal-club-esportif-francais/1077857) and developed by an external agency.
- ✅ Created LaPiscine, a private Discord group about crypto assets. Spent some time developing automated alerting tools and chatbots that serve as interfaces to simplify various alerts related to cryptocurrency market fluctuations.


- #### 2016
- ✅ Released my first freelance project: the Omen by HP Challenge (you can find a more or less functional demo version [here](http://alin.hervelin.com/omen/). It's a small application I developed for the [Team Vitality](https://vitality.gg/) and which was used during the press evening for the new product line of Omen by HP. The plan: test the guests's cognitive and motor skills against professional e-sport players of Team Vitality. This application was bought by Omen by HP in 2017 for use in conventions like Paris Games Week or Japan Expo.

- #### 2015
- ✅ Too busy learning code to sleep 🧟♂️
- ✅ Starting my self-company, I can officially bill and put the skills I'm learning to good use.
- ✅ Meeting with Camille 👩🏼‍❤️‍👨🏼

- #### 2014
- ✅ Obtained my scientific degree with a "I spend more time on YouTube than revising my math classes" specialization (I still got a nice 13/20 thanks to Grandpa's remedial sessions).
- ✅ First year of graduate studies at HETIC, I discover the web development 👨🏻‍💻

- #### Somewhere between 2007 and 2009
- ✅ Discovered Photoshop, it seems to me that it was Photoshop CS3 at the time. 

- #### 2006
- ✅ No more family computer under the stairs. I am digitally emancipated with my first computer as a gift for my 10th birthday. Planned: MSN with friends, Prizee, Skyblog, Habbo Hotel and World of Warcraft.

- #### 1996
- ✅ I poped on earth 👶🏻

Hello there 👋🏻 I'm Antoine, welcome on my slice of internet!

What's on my mind ?