Antoine Lin

## Introduction

Récemment, j’ai dû migrer ma stack sous Apollo Client vers une autre librairie GraphQL. En cause, des problématiques de performances en partie dues à la façon dont la libraire parcourt l'arbre et les requêtes, provoquant des baisses de score Google lighthouse et empêchant la bonne indexation des pages sur la [SERP](https://www.wordstream.com/serp) Google. La librairie est lourde, et possède trop d’outils que je n’utilise pas.

En remplacement, j’ai opté pour **Urql**. Basée sur des observables, et plutôt légère, c'est une librairie avec une vision à l'opposé de ce que propose Apollo : à la place d’un outil « tout en un » pour répondre à toutes les problématiques, je compose moi-même mon « menu » avec des modules supplémentaires que j'ajoute en fonction de mes besoins. Cette approche me laissant le soin de contrôler finement ce qui est ajouté dans mon *bundle* front-end.

Mais voilà, une des fonctionnalité d’Apollo Client que j’apprécie beaucoup, c’est la composition des `Link`, me permettant, en autre, de créer plusieurs `HttpLink` pour **plusieurs sources de données.** Si vous êtes habitué à utiliser GraphQL, vous avez peut-être déjà dû vouloir récupérer de la donnée en parallèle de votre API GraphQL principale (d'un service tiers par exemple). Malheureusement, je n'ai pas trouvé d'information en ligne expliquant comment faire la même chose en passant par Urql. La plupart des réponses se résumant à dire « pourquoi utiliser plusieurs sources, ce n'est pas dans l’esprit GraphQL » (ce qui est vrai, en soit, mais je n'ai pas toujours le temps créer un serveur GraphQL pour fédérer deux sources de données).

Donc, si vous souhaitez savoir si il est possible de gérer **plusieurs sources de données avec Urql** et comment le faire, ne cherchez plus vous avez trouvé l'article qu'il vous faut.

## Pré-requis : installation des modules nécessaires

Urql est un client GraphQL qui repose sur une collection de modules qui se connectent entre eux. Comme j’ai pu vous le présenter en introduction, c’est ce qui nous permet de composer la liste exhaustive des outils dont on va se servir. Voyez ces modules comme des opérateurs dans le monde des observables. Ça tombe bien, c’est exactement ce qui fait le fonctionnement de la librairie.

Ces modules, appelés des `exchange`, apportent les briques qui modifient les requêtes aux serveurs GraphQL.

L’ordre est important et doit être logique en fonction des transformations que vous souhaitez appliquer. D'après la [documentation officielle](https://formidable.com/open-source/urql/docs/advanced/authoring-exchanges/#synchronous-first-asynchronous-last), il faut toujours commencer par les tâches synchrones pour finir par celles asynchrones.

Lorsque vous configurez un client Urql, vous avez accès, par défaut, à certains exchange :

- `dedupExchange` : assure que des requêtes identiques ne sont pas exécuté en double
- `cacheExchange` : met le résultat des requêtes en cache
- `fetchExchange` : se charge d'exécuter la requête HTTP (en utilisant l'API `fetch`)

Pour notre problématique, nous aurons besoin d’un `exchange` qui n'est pas présent dans le *core* Urql : `authExchange` .

De base, il permet de configurer facilement un système d'authentification (par exemple via JWT), mais il va surtout nous servir à **modifier le contexte de notre requête** à la volée.

Commençons par l’installer :

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

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

Et importons le :

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

## Création du client GraphQL

Cette fonction devra retourner la méthode de création du client Urql avec les bons paramètres de configuration et les différents `exchange` que vous souhaitez implémenter :

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

export function createGraphqlClient(): Client {
  return createClient({
	url: 'your-api-url', // Le client que vous souhaitez utiliser "par défaut"
	fetchOptions: {
	  credentials: 'same-origin',
	  method: 'GET',
	  headers: {
	    Authorization: `Bearer ...`,
	    'Content-Type': 'application/json',
	  }
	},
	preferGetMethod: true,
	exchanges: [],
  })
}
```

Il nous suffit ensuite d’ajouter les `exchange` Urql de "base" ([en savoir plus](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
		],
  })
}
```

## Ajout de l'exchange d'authentification

Une fois le client configuré avec les options de base, on peut s'attaquer à l'ajout de `authExchange`.

L’idée globale est de calquer la méthode qu’on utiliserait avec Apollo Client (et les `Link`) pour gérer plusieurs sources de données. (Si vous souhaitez en savoir plus sur cette méthode, personnelement je me sers de l’article de Jamal Mashal que vous trouverez [ici](https://www.jamalx31.com/tech-posts/using-apollo-with-multiple-graphql-endpoints)).

Pour résumer, on va ajouter dans le contexte de chaque requête (via le client ou via une intégration comme les hooks React) une clé `clientName`, optionnelle, qui, servira de condition pour la modification du reste du contexte (URL de la requête et potentiellement des headers si besoin d'un token d'authentification).

L'exchange `authExchange` prend en paramètre un objet qui nécessite 2 clés au minimum : `addAuthToOperation` et `getAuth`.

Pour `addAuthToOperation` :

```typescript
addAuthToOperation({ operation }) {
  // si la clé clientName n'existe pas dans le contexte, on retourne l'opération courante
  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
    }
  }
}
```

Ajoutez autant de cas que de sources de données nécessaires.  
  
Pour `getAuth` dans notre exemple ce sera simple :

```typescript
getAuth: null
```

Si besoin, vous pouvez y ajouter de la logique, comme récupérer un token avec une promesse par exemple :

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

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


## Exemple de requête avec le client GraphQL

Pour utiliser la bonne API avec le client GraphQL :

```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
}
```

## Exemple de requête avec les hooks React


Pour utiliser la bonne source en passant par une intégration du client Urql (comme via les hooks React) :

```typescript
const [{ error, data, fetching }] = useQuery(
  myQueryForEndpointA,
  {} // cet objet contient les variables de la requête,
  context: useMemo(() => ({
    clientName: 'endpoint-a'
  }), []),
})

const [{ error, data, fetching }] = useQuery(
  myQueryForEndpointB,
  {} // cet objet contient les variables de la requête,
  context: useMemo(() => ({
		clientName: 'endpoint-b'
  }), []),
})
```

Note : pensez à utiliser `useMemo` quand vous définissez le contexte pour éviter de rentrer dans une boucle infinie avec React. ([voir l'*issue* sur Github](https://github.com/FormidableLabs/urql/issues/507))

## Conclusion

Vous devriez maintenant avoir suffisamment d’informations pour mettre en place un client Urql qui gère plusieurs sources de données.

Notes :
- le code actuel n’est pas 100% « type safe » puisque la clé `clientName` n'existe pas dans le typage Typescript du contexte Urql,
- ajouter une source de donnée augmente la complexité dans votre gestion des typages si vous utilisez `graphql-codegen`. On en parlera dans un prochain article.

Pour vous simplifier la vie, j’ai créé [ce Gist](https://gist.github.com/toinelin/f061e812b1746119000ec572bc5b53eb) avec l’ensemble des bouts de code de l’article. N'hésitez pas à y ajouter un commentaire si vous souhaitez apporter votre avis ou votre aide.

Et si jamais vous avez la moindre question (ou si vous souhaitez juste discuter), vous pouvez me contacter via [Twitter](https://twitter.com/vahilloff).


Utiliser plusieurs API GraphQL avec Urql

Ouverture de mon blog !

## Introduction

L'histoire que j'aimerais vous raconter commence en 2009. Cette année la sort le nouvel opus phare de la licence Call of Duty, Modern Warfare 2. Et avec cet opus, se développe un immense écosystème de joueurs et de passionnés qui créent et partagent du contenu en ligne. Si vous étiez, comme moi, à fond dans cet univers, vous devriez peut-être vous rappeler des _trickshots_, des _killfeeds_ et des groupes de discussion Skype avec 200 personnes, vous voyez de quoi je parle. Et si vous ne l'étiez pas, laissez-moi vous raconter cette époque que les jeunes de moins de 20 ans ne peuvent plus connaître.

Call of Duty, ou COD, est un FPS, _First Person Shooter_, ou vous incarnez et contrôlez un petit soldat qui fait la guerre. Dans ce jeu, il existe un mode en particulier qui consiste à s'affronter en ligne, en solo ou en équipe, contre des joueurs du monde entier. Et en 2009, on ne parle que de ça. Dans la cours de récréation, sur Internet, tout le monde veux voir ou partager ses actions, expliquer comment être le meilleur ou présenter pourquoi ses associations d'armes et accessoires sont les plus fortes. Des équipes se forment, filment leurs exploits et s'affrontent au travers de montages vidéos sur YouTube.
Je voulais briller au sein de cette communauté, et représenter une de ces grosses équipes. Mais à cette époque, je n'étais ni particulièrement doué au jeu, ni à l'aise pour parler devant une caméra. Comment faire ?
Mon truc à moi, c'était la production graphique. Photoshop, After Effect, Cinema4D, c'était mon dada. Et ça tombait bien, puisqu'il y avait un énorme besoin de ce type de profil pour créer le contenu publié sur les réseaux sociaux, c'était mon ticket d'entrée.

Si je vous raconte cette histoire, c'est parce que c'est en 2009 que j'ai découvert la fibre entrepreneurial qui m'anime. C'était en premier lieu une passion, puis une locomotive qui fût conductrice de mon choix de carrière professionnelle, et aujourd'hui, c'est ce qui me permet de payer mes factures.

## Qui suis-je ?

J'ai grandi dans une petite ville de Seine-et-Marne, qui s'appelle Magny le Hongre, proche du parc Disneyland Paris (la précision est importante pour la situation géographique, question d'habitude quand on grandit dans ces coins-là.). J'ai fait mes études dans un lycée publique aux abords du centre commercial Val d'Europe avant de rejoindre l'école HETIC en 2014 après avoir décroché mon baccalauréat scientifique.

J'ai suivi la formation "Grande École", sur 5 ans, qui délivre un master de niveau I, enregistré au RNCP, que j'ai obtenu donc en 2019.

> HETIC forme des experts en ingénierie numérique (Bachelors & Mastères) capables de gérer les impératifs opérationnels d’un projet d’envergure, de penser en entre/intrapreneurs et de participer à la transition digitale de la société en France et à l’international. [Pour en savoir plus](https://www.hetic.net/)

Après avoir lu l'introduction vous avez peut-être du mal à trouver le rapport avec l'intitulé de mon blog. Dans les faits, à date d'entrée à HETIC j'étais persuadé de me diriger vers une carrière dans le graphisme. C'est en deuxième année d'école, que j'ai découvert le développement web avec [Bruno Simon](https://bruno-simon.com) comme professeur, et depuis, c'est une grande histoire d'amour entre les lignes de code et moi.

En fin 2015, j'ai ouvert ma micro-entreprise pour travailler sur des projets concrets. Mes principaux clients, je les ai trouvés sur le marché des jeux-vidéos et surtout de l'e-sport. J'ai eu l'occasion de concevoir et développer plusieurs applications, dont des vitrines marketing ou des sites e-commerce, pour des entreprises comme [Omen by HP](https://www.omen.com/fr), filiale de HP, [Team Vitality](https://vitality.gg/fr) la plus grosse structure e-sport française, ou des influenceurs comme le joueur e-sport le plus titré de France, [Gotaga](https://gotaga.tv).

![Site officiel Vitality, vitality.gg, en ligne de 2018 à fin 2019](https://www.datocms-assets.com/34579/1621362983-vitality-gg.jpg?w=1680&h=1051)

À la suite de mes études, j'ai fait évoluer cette activité secondaire en emploi à temps plein et j'ai clôturé ma micro-entreprise au bénéfice d'une entité morale indépendante. Depuis 2019, je travaille avec les plus gros influenceurs francophones du marché des jeux d'argent comme *Head of Tech* et manager, les accompagnant dans l'ensemble de leurs projets en ligne.

## Ce que je fais

Je suis principalement développeur front-end, soit la personne qui s'occupe de créer des expériences web (de la création du parcours utilisateur, à la connexion avec des services en passant par l'intégration des interfaces). Mais je fais aussi beaucoup d'opérations, soit la gestion de la disponibilité des applications, et un peu de back-end. Pour les plus tech d'entre vous, au quotidien, je jongle surtout entre du ReactJS avec NextJS sous TypeScript pour le front-end, du GraphQL avec Prisma et GraphQL Nexus pour du back-end, du Kubernetes pour de l'opération et du Nx workspace pour la gestion de mes mono-dépôts. Adepte des paradigmes réactifs et fonctionnels, je travaille également beaucoup sous RxJS. Et tout ce beau monde, je l'automatise sous CI/CD avec GitLab.

Je vous ai dit que j'étais développeur, mais en réalité, je fais un peu plus que ça. J'interviens sur la conception des produits, mais aussi sur l'organisation, la structure managériale, les processus et les outils utilisés en interne. Je continue de faire de la production graphique de temps à autres (ce qui me permet d'utiliser mes compétences acquises au lycée dans mon quotidien). Aujourd'hui, je manage également des développeurs avec le travail qui en découle : création des spécifications techniques, réunions quotidiennes et hebdomadaires de suivi, retours sur le code et suivi de projets.

Pendant mon temps libre, j'aime jouer aux jeux-vidéos, embêter mon petit bouledogue français (elle s'appelle Nala, je vous mets une photo) et j'essaye de passer un peu plus de temps à lire.

![Nala, mon petit bouledogue français](https://www.datocms-assets.com/34579/1619034150-img4914.jpg?w=1008&h=735)

Après avoir lu ces lignes, je sais ce que vous vous dites et vous avez raison. Je fais beaucoup de choses. Pour moi, c'est surtout de la passion et beaucoup d'énergie, énergie que j'aimerais partager, ainsi que mes découvertes, par écrit sur ce blog, en direct sur ma chaîne [Twitch](https://twitch.tv/vahill), et sur ma chaîne [YouTube](https://youtube.com/c/Vahill). Donc n'hésitez pas à venir me suivre sur les réseaux et à ajouter ce site dans vos favoris. Et si par hasard, j'ai réussi à piquer votre curiosité et que vous voulez en savoir davantage sur moi, voire peut-être venir discuter et partager un café virtuel, j'ai ouvert ce [serveur Discord](https://discord.gg/9kFtqW9H) orienté autour de la tech, vous êtes le bienvenu !

## Chronologie

- #### 2021
- ✅ Je lance mon blog
- ✅ J'obtiens de nouvelles responsabilités, d'autres développeurs me rejoignent et je deviens tech lead 🙌🏻
- ✅ Je commence le streaming sur ma chaîne [Twitch](https://twitch.tv/vahill)

- #### 2020
- ✅ À la suite de mon contrat d'alternance, je continue l'aventure en 3/5 avec PandaScore. En parallèle, mon activité freelance prend de l'ampleur et je décroche des contrats dans le marché des jeux d'argent.
- ✅ En janvier, ma petite louloute rejoint la famille 🐶
- ✅ Sur un coup de bol, en février, des amis à moi rendent leur appartement et je récupère les clés. On déménage donc dans notre nouveau chez-nous, plus grand (donc plus d'espace pour la chienne), immeuble neuf avec place parking et ascenseur. Et ça, juste avant le premier confinement de la covid-19, que demande le peuple ?
- ✅ En juillet, et au terme de mon contrat, je quitte PandaScore pour tenter l'aventure entrepreneuriale à temps plein.
- ✅ En août, je mets ma micro-entreprise en cessation et j'ouvre une SASU

- #### 2019
- ✅ Je rejoins l’entreprise PandaScore comme développeur front-end en contrat professionnalisant. PandaScore est une *startup* parisienne et un acteur majeur dans l’agrégation de données en temps réel sur les matchs de compétitions sportifs éléctroniques. Données qui leurs permettent aujourd'hui de vendre des côtes de paris sur le secteur de l'e-sport. Vous êtes bookmaker et vous souhaitez ajouter des marchés e-sport à votre offre ? Allez dont demander à PandaScore !
- ✅ Avec Camille, on déménage dans notre premier appartement 🚀
- ✅ J’obtiens mon diplôme à HETIC « Expert en ingénierie et management de la communication numérique », Titre de niveau 7 (Master 2) enregistré au Répertoire National des Certifications Professionnelles après 5 ans d'études.
- ✅ Vroum ! Vroum ! J'achète ma première moto, une Kawasaki Z650, une dinguerie 🤯


- #### 2018
- ✅ Publication du portfolio [michaelzaccardi.com](https://michaelzaccardi.com), développé pour mon ami d'école. Développé sous WordPress avec le framework [Wordplate](https://github.com/wordplate/wordplate). Le projet reçoit une mention honorable auprès d’Awwwards. Et un French Design Index.
- ✅ Publication de la boutique en ligne shop.vitality.gg. Projet que j’ai développé en freelance sous Shopify. Le site est resté en ligne jusqu'en 2019, remplacé par la version actuelle mise en ligne suite à leur [levée de fonds](https://www.lequipe.fr/Esport/Actualites/Vitality-une-levee-de-fonds-et-des-locaux-pour-le-principal-club-esportif-francais/1077857) et développée par une agence externe.
- ✅ Je rentre en stage chez BlueBoard (rachetée par le groupe Channel Advisor en 2020) comme développeur front-end ReactJS. BlueBoard est une startup parisienne qui met à disposition une solution de surveillance e-commerce pour les marques et les fabricants qui vendent par l'intermédiaire de détaillants en ligne. Vous vendez en ligne et vous souhaitez savoir en un seul endroit quel est l'état de votre stock et quels sont les différents retours client sur tout votre réseau de distribution ? BlueBoard est le service qu'il vous faut !
- ✅ Publication de la boutique en ligne shop.gotaga.tv. Projet que j’ai développé en freelance sous Shopify. Le site est resté en ligne jusqu'en 2019.

- #### 2017
- ✅ Publication de vitality.gg ! Mon premier projet d’envergure avec la [Team Vitality](https://vitality.gg/). Développé sous WordPress avec un thème personnalisé et hébergé sur AWS en utilisant Docker. Le site est resté en ligne jusqu'en 2019, remplacé par la version actuelle mise en ligne suite à leur [levée de fonds](https://www.lequipe.fr/Esport/Actualites/Vitality-une-levee-de-fonds-et-des-locaux-pour-le-principal-club-esportif-francais/1077857) et développée par une agence externe.
- ✅ Création de LaPiscine, groupe privé Discord sur les crypto actifs. J'ai passé un peu de temps au développement d’outils et de chatbots d’alertes automatisés servant d’interfaces pour simplifier les alertes diverses liées aux fluctuations du marché des cryptomonnaies.


- #### 2016
- ✅ Sortie de mon premier projet freelance : le Omen by HP Challenge (vous pouvez trouver une version démo plus ou moins fonctionnelle [ici](http://alin.hervelin.com/omen/). C'est une petite application que j'ai développé pour la [Team Vitality](https://vitality.gg/) et qui a été utilisée lors de la soirée de presse de la présentation de la nouvelle gamme de produit Omen by HP. Le principe : tester les capacités cognitives et motrices des invités face aux joueurs professionnels e-sport de la Team Vitality. Application qui a été rachetée par Omen by HP en 2017 pour utilisation dans les conventions comme la Paris Games Week ou la Japan Expo.

- #### 2015
- ✅ Trop occupé à apprendre à coder pour dormir 🧟‍♂️
- ✅ Création de ma micro-entreprise, je peux officiellement facturer et mettre à profit les compétences que j'acquière.
- ✅ Rencontre avec Camille 👩🏼‍❤️‍👨🏼

- #### 2014
- ✅ Obtention de mon baccalauréat scientifique spécialisation "je passe plus de temps sur YouTube qu'à réviser mes cours de maths" (je décroche quand même un beau 13/20 grâce aux séances de rattrapage de papi).
- ✅ Première année d'études supérieures à HETIC, je découvre le web et le développement 👨🏻‍💻

- #### Quelque part entre 2007 et 2009
- ✅ Découverte de Photoshop, il me semble que c'était la version CS3 à l'époque. 

- #### 2006
- ✅ Fini l'ordinateur familial sous l'escalier. Je m'émancipe numériquement avec mon premier ordi comme cadeau pour mes 10 ans. Au programme : MSN avec les potes, Prizee, Skyblog, Habbo Hotel et World of Warcraft.

- #### 1996
- ✅ Je pop sur terre 👶🏻


Salut 👋🏻 Je m'appelle Antoine et bienvenue sur mon bout d'internet !

Mes derniers articles