Démarrer mon projet
Il y a plusieurs façons de faire. Il existe de nombreux clients GraphQL :
Dans ce tutoriel on va utiliser apollo-client. Très utilisé, une bonne documentation, supporte le SSR (Server Side Rendering, Next.js étant un framework le supportant), permet également la gestion de la state et du cache.
Le code de ce tutoriel est disponible sur GitHub : https://github.com/theboringcode/connect-nextjs-apollo-client
J’ai crée une simple app nextjs :
npx create-next-app nextjs
J’ai renommé le fichier /pages/index.js en /pages/index.ts pour utiliser typescript. En lançant la commande
yarn dev
Il vous sera demandé d’installer les dépendances pour utiliser typescript.
J’ai également créer un fichier index.js à la racine. Celui-ci contient un simple serveur GraphQL utilisant apollo-server. Après avoir installé toutes les dépendances nécessaire, vous pourrez le lancer sur le port 4000 avec la commande
node index.js
Il y a plusieurs façons de connecter apollo-client à son app Next.js.
L’une d’elle étant de créer un fichier /pages/_app.tsx et d’overide la fonction de base. On pourrait par exemple englober toute l’application par un component <ApolloClient>{children}</ApolloClient>.
Mais cela voudrait dire que toute notre app utilisera, même si elle n’as pas besoin de données du serveur, toutes les fonctions liées aux données. Toutes les pages seront donc rendu du côté du serveur.
Il peut être plus judicieux d’englober uniquement la page qui a besoin des données du serveur d’un component ApolloClient.
Nous allons créer une fonction qui prendra une page Next.js en paramètre et retournera celle-ci entièrement rendu, avec toutes les queries effectuées, coté serveur.
Dans le GitHub que je vous ai fournis un peu plus tôt, vous pouvez récupérer le fichier /lib/withApollo.tsx.
Il contient tout le code nécessaire, voici toutes les dépendances qu’il vous faudra installer :
yarn add @apollo/react-hooks apollo-cache-inmemory apollo-client apollo-link-context apollo-upload-client cookie http isomorphic-unfetch @apollo/react-ssr
Il vous suffira de modifier dans le fichier l’url de votre serveur :
Vous remarquerez qu’on utilise la fonction createUploadLink de apollo-client-upload. Cela vous permettra d’envoyer le scalar Upload à votre backend si vous en avez besoin.
Dans votre dossier /pages, dès que vous souhaitez utiliser les données du serveur (que ce soit pour une query ou une mutation), il vous suffit d’exporter votre fonction React dans la fonction withApollo. Vous pouvez retrouver l’exemple complet dans /pages/index.tsx.
.svg)
