L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Utilisation avancée de GraphQL dans les sites Web Gatsby
Avant la sortie de GraphQL en 2015, Representational State Transfer (REST) était le principal moyen de s'interfacer avec une API. L'introduction de GraphQL a donc été un changement majeur dans le développement logiciel.
En tant que générateur de site statique moderne, Gatsby utilise GraphQL pour fournir une méthodologie concise pour introduire et manipuler des données dans le framework. Dans cet article, nous examinerons de plus près GraphQL et comment nous pouvons l'intégrer dans un site Web Gatsby en créant et en implémentant un sourçage et une transformation avancés des données dans Gatsby. Le résultat est un blog d'éditeur qui pourrait être utilisé par n'importe quelle maison d'édition pour partager le contenu de leurs auteurs.
Qu'est-ce que GraphQL?
Selon le QL dans son nom, GraphQL est un ] langage de requête combiné à un ensemble d'outils créés pour offrir flexibilité et efficacité dans la façon dont nous extrayons les données d'une source. Avec GraphQL, un client / consommateur peut demander exactement les données dont il a besoin. Le serveur / fournisseur répond avec une signature de réponse JSON correspondant aux exigences spécifiées dans la requête. Cela nous permet d'exprimer nos besoins en données de manière déclarative.
Pourquoi utiliser GraphQL?
En tant que générateur de site statique, Gatsby stocke des fichiers statiques, ce qui rend l'interrogation des données presque impossible. Il y a souvent des composants de page qui doivent être dynamiques, comme la page d'article de blog unique, de sorte qu'il serait nécessaire d'extraire des données d'une source et de les transformer au format requis, tout comme si les articles de blog étaient stockés dans des fichiers de démarque. Certains plugins fournissent des données provenant de diverses sources, ce qui vous laisse avec l'interrogation et la transformation des données requises à partir d'une source.
Selon une liste sur gatsby.org, GraphQL est utile dans Gatsby pour:
Concepts GraphQL
Gatsby maintient les mêmes idées de GraphQL que celles largement utilisées; Certains de ces concepts sont:
Schema Definition Language
GraphQL SDL est un système de types incorporé dans GraphQL, et vous pouvez l'utiliser pour créer de nouveaux types pour vos données.
Nous pouvons déclarer un type pour un pays, et ses attributs peuvent inclure un nom, un continent, une population, un PIB et un nombre d'états.
Comme exemple ci-dessous, nous avons créé un nouveau type avec le nom de Aleem . Il a hobbies qui est un tableau de chaînes et ne sont pas obligatoires, mais le pays, l'état matrimonial et les postes sont nécessaires en raison du ! qu'ils incluent, les publications font également référence à un autre type, Message .
type Auteurs {
nom: String !,
hobbies: [String]
country: String!
marié: Booléen!
messages: [Post!]
}
tapez Post {
titre: String!
corps: String!
}
type Requête {
auteur: Auteur
}
schema {
requête: requête
}
Requêtes
Nous pouvons utiliser Requêtes pour extraire des données d'une source GraphQL.
Considérant un ensemble de données comme celui-ci
{
Les données: {
auteur: [
{
hobbies: ["travelling", "reading"],
marié: faux,
pays: "Nigéria",
nom: "Aleem Isiaka",
messages: [
{
title: "Learn more about how to improve your Gatsby website",
},
{
title: "The ultimate guide to GatsbyJS",
},
{
title: "How to start a blog with only GatsbyJS",
},
],
},
],
},
};
Nous pouvons avoir une requête pour récupérer le pays et les messages à partir des données:
query {
auteurs {
pays,
des postes {
Titre
}
}
}
La réponse que nous obtiendrons devrait contenir les données JSON des articles de blog avec juste le titre et rien de plus:
[
{ country: “Nigeria”, posts: [{...}, {...}, {...}]},
{pays: "Tunisie", messages: []},
{titre: "Ghana", messages: []},
]
Nous pouvons également utiliser des arguments comme conditions pour une requête:
query {
auteurs (pays: "Nigeria") {
pays,
des postes {
Titre
}
}
}
Qui devrait renvoyer
[
{ country: “Nigeria”, posts: [{...}, {...}, {...}]}
]
Les champs imbriqués peuvent également être interrogés, comme les messages avec le type de message, vous pouvez demander uniquement les titres:
query {
auteurs (pays: «Nigeria») {
pays,
des postes {
Titre
}
}
}
Et il devrait renvoyer n'importe quel type d'auteur correspondant Nigeria renvoyant le tableau de pays et de messages contenant des objets avec juste le champ de titre.
Gatsby avec GraphQL
Pour éviter la surcharge d'avoir un serveur / service qui sert des données que GraphQL peut transformer, Gatsby exécute des requêtes GraphQL au moment de la construction. Les données sont fournies aux composants pendant le processus de construction, les rendant facilement disponibles dans le navigateur sans serveur.
Néanmoins, Gatsby peut fonctionner comme un serveur qui peut être interrogé par d'autres clients GraphQL, comme GraphiQL , dans un navigateur.
Manières d'interagir avec Gatsby avec GraphQL
Il y a deux endroits où Gatsby peut interagir avec GraphQL, via un fichier API gatsby-node.js et via des composants de page.
gatsby-node. js
L'API createPage peut être configurée comme une fonction qui recevra un assistant graphql dans le cadre des éléments du premier argument passé à la fonction. [19659038] // source gatsby-node.js: https://www.gatsbyjs.org/docs/node-apis/#createPages
exports.createPages = async ({graphql, actions}) => {
résultat const = attendre graphql (`
query loadPagesQuery ($ limit: Int!) {
allMarkdownRemark (limite: $ limit) {
bords {
nœud {
frontmatter {
limace
}
}
}
}
} `)
}
Dans le code ci-dessus, nous avons utilisé l’assistant GraphQL pour récupérer les fichiers de démarque à partir de la couche de données de Gatsby. Et nous pouvons l'injecter pour créer une page et modifier les données existantes à l'intérieur de la couche de données Gatsby.
Composants de page
Les composants de page dans le répertoire / pages ou les modèles rendus par l'action API createPage peuvent importer graphql du module gatsby et exportez une pageQuery . À son tour, Gatsby injecterait une nouvelle prop data dans les accessoires du composant de page contenant les données résolues.
import React de "react";
import {graphql} de "gatsby";
const Page = accessoires => {
return {JSON.stringify (props.data)}
;
};
export const pageQuery = graphql`
requete { ... }
`;
exporter la page par défaut;
Dans d'autres composants
D'autres composants peuvent importer les composants graphql et StaticQuery du module gatsby restituer le & lt; StaticQuery /> passant des accessoires de requête qui implémentent l'assistant Graphql et rendent pour obtenir les données renvoyées.
import React de "react";
import {StaticQuery, graphql} de "gatsby";
const Brand = props => {
revenir (
{data.site.siteMetadata.title}
);
};
const Navbar = accessoires => {
revenir (
Création d'un blog d'édition Gatsby moderne et avancé
Dans cette section, nous allons vous présenter un processus de création d'un blog qui prend en charge le marquage, la catégorisation, la pagination et le regroupement d'articles par auteurs. Nous utiliserons des plugins de l'écosystème Gatsby pour intégrer certaines fonctionnalités et utiliserons la logique dans les requêtes GraphQL pour créer un blog d'éditeur prêt pour plusieurs publications d'auteurs.
La version finale du blog que nous allons créer peut être trouvée ici le code est également hébergé sur Github .
Initialisation du projet
Comme tout site Web Gatsby, nous initialisons à partir d'un démarreur, ici nous utiliserons le démarreur avancé mais modifié pour répondre à notre cas d'utilisation.
Commencez par cloner ce dépôt Github changez la branche de travail en dev-init puis exécutez npm run develop à partir du dossier du projet pour démarrer le serveur de développement rendant le site disponible à http: // localhost: 8000 .
git clone git@github.com: limistah / modern-gatsby-starter .git
cd moderne-gatsby-starter
git checkout dev-init
npm installer
npm exécuter développer
En visitant http: // localhost: 8000 affichera la page d'accueil par défaut de cette branche.
Création de contenu de messages de blog
Certains contenus de messages inclus dans le référentiel du projet sont accessibles à l'adresse branche dev-blog-content . L'organisation du répertoire de contenu ressemble à ceci /content/YYYY_MM/DD.md qui regroupe les articles par mois créé de l'année.
Le contenu du billet de blog a un titre , date auteur catégorie tags comme frontmatter, que nous utiliserons pour distinguer un article et effectuer un traitement supplémentaire sur , tandis que le reste du contenu est le corps du message.
title: "Bold Mage"
date: "2020-07-12"
auteur: "Tunde Isiaka"
catégorie: "tech"
Mots clés:
- la programmation
- des trucs
- Crème glacée
- autre
---
# Donut I love barre de chocolat macaron
Gâteau à l'avoine guimauve sucette gâteau aux fruits J'aime jelly-o. Gummi ours gâteau gaufrette tarte au chocolat. Pâte de guimauve en poudre gâteau au chocolat bonbons chupa chups. Jelly beans en poudre soufflé biscuit tarte macaron au chocolat. Pâte d'amande au citron gouttes chupa chups biscuit sucré sésame snaps gelée halva.
Affichage du contenu des articles
Avant de pouvoir rendre nos messages Markdown en HTML, nous devons effectuer un certain traitement. Tout d'abord, charger les fichiers dans le stockage Gatsby, analyser le MD en HTML, lier les dépendances d'image et les likes. Pour faciliter cela, nous utiliserons une multitude de plugins de l'écosystème Gatsby.
Nous pouvons utiliser ces plugins en mettant à jour gatsby-config.js à la racine du projet pour ressembler à ceci:
module.exports = {
siteMetadata: {},
plugins: [
{
resolve: "gatsby-source-filesystem",
options: {
name: "assets",
path: `${__dirname}/static/`,
},
},
{
resolve: "gatsby-source-filesystem",
options: {
name: "posts",
path: `${__dirname}/content/`,
},
},
{
resolve: "gatsby-transformer-remark",
options: {
plugins: [
{
resolve: `gatsby-remark-relative-images`,
},
{
resolve: "gatsby-remark-images",
options: {
maxWidth: 690,
},
},
{
resolve: "gatsby-remark-responsive-iframe",
},
"gatsby-remark-copy-linked-files",
"gatsby-remark-autolink-headers",
"gatsby-remark-prismjs",
],
},
},
],
};
Nous avons demandé à gatsby d'inclure les plugins pour nous aider à effectuer certaines actions, notamment l'extraction de fichiers du dossier / static pour les fichiers statiques et / content pour nos articles de blog. De plus, nous avons inclus un plugin de transformation de remarques pour transformer tous les fichiers se terminant par .md ou .markdown en un nœud avec tous les champs de remarque pour rendre le démarquage au format HTML.
Enfin, nous avons inclus des plugins dans fonctionnant sur les nœuds générés par gatsby-transformer-remarque .
Implémentation du fichier API gatsby-config.js la racine du projet, nous pouvons exporter une fonction nommée createPage et avoir le contenu de la fonction pour utiliser l'assistant graphQL pour extraire les nœuds de la couche de contenu de GatsbyJS.
La première mise à jour de cette page inclurait s'assurer que nous avons un slug défini sur les nœuds de remarque MarkDown. Nous allons écouter l ' API onCreateNode et obtenir le nœud créé pour déterminer s'il s'agit d'un type de MarkdownRemark avant de mettre à jour le nœud pour inclure un slug et la date en conséquence.
const path = require ("path ");
const _ = require ("lodash");
moment const = exiger ("moment");
const config = require ("./ config");
// Appelé à chaque fois qu'un nouveau nœud est créé
exports.onCreateNode = ({nœud, actions, getNode}) => {
// Une action de l'API Gatsby pour ajouter un nouveau champ à un nœud
const {createNodeField} = actions;
// Le champ qui serait inclus
laissez limace;
// Le nœud actuellement créé est de type MarkdownRemark
if (node.internal.type === "MarkdownRemark") {
// Rappel, nous utilisons gatsby-source-filesystem?
// Ceci tire le nœud parent (File),
// au lieu du nœud MarkdownRemark actuel
const fileNode = getNode (node.parent);
const parsedFilePath = chemin.parse (fileNode.relativePath);
si (
Object.prototype.hasOwnProperty.call (node, "frontmatter") &&
Object.prototype.hasOwnProperty.call (node.frontmatter, "title")
) {
// Le nœud est un type de remarque valide et a un titre,
// Utilise le titre comme slug pour le nœud.
slug = `/ $ {_. kebabCase (node.frontmatter.title)}`;
} else if (parsedFilePath.name! == "index" && parsedFilePath.dir! == "") {
// Le fichier est dans un répertoire et le nom n'est pas un index
// par exemple content / 2020_02 / apprenant / post.md
slug = `/ $ {parsedFilePath.dir} / $ {parsedFilePath.name} /`;
} else if (parsedFilePath.dir === "") {
// Le fichier n'est pas dans un sous-répertoire
slug = `/ $ {parsedFilePath.name} /`;
} autre {
// Le fichier est dans un sous-répertoire et le nom du fichier est index
// par exemple content / 2020_02 / apprenant / index.md
slug = `/ $ {parsedFilePath.dir} /`;
}
if (Object.prototype.hasOwnProperty.call (node, "frontmatter")) {
if (Object.prototype.hasOwnProperty.call (node.frontmatter, "slug"))
slug = `/ $ {_. kebabCase (node.frontmatter.slug)}`;
if (Object.prototype.hasOwnProperty.call (node.frontmatter, "date")) {
const date = moment (nouvelle date (node.frontmatter.date), "JJ / MM / AAAA");
if (! date.isValid)
console.warn (`AVERTISSEMENT: date invalide.`, node.frontmatter);
// MarkdownRemark n'inclut pas la date par défaut
createNodeField ({nœud, nom: "date", valeur: date.toISOString ()});
}
}
createNodeField ({nœud, nom: "slug", valeur: slug});
}
};
The Post Listing
À ce stade, nous pouvons implémenter l'API createPages pour rechercher toutes les démarques et créer une page avec le chemin comme slug que nous avons créé ci-dessus. Voir sur Github .
// gatsby-node.js
// code précédent
// Créez des pages par programme!
exports.createPages = async ({graphql, actions}) => {
// Extrait l'action createPage de l'API Actions
const {createPage} = actions;
// Modèle à utiliser pour rendre le post converti en HTML
const postPage = path.resolve ("./ src / templates / singlePost / index.js");
// Obtenez tout le démarque analysé à l'aide de gatsby-source-filesystem et gatsby-transformer-remarque
const allMarkdownResult = attendre graphql (`
{
allMarkdownRemark {
bords {
nœud {
des champs {
limace
}
frontmatter {
Titre
Mots clés
Catégorie
Date
auteur
}
}
}
}
}
`);
// Lève si une erreur se produit lors de la récupération des fichiers de démarque
if (allMarkdownResult.errors) {
console.error (allMarkdownResult.errors);
throw allMarkdownResult.errors;
}
// Les éléments / détails sont stockés à l'intérieur des bords
const postsEdges = allMarkdownResult.data.allMarkdownRemark.edges;
// Trier les articles
postsEdges.sort ((postA, postB) => {
const dateA = moment (
postA.node.frontmatter.date,
siteConfig.dateFromFormat
);
const dateB = moment (
postB.node.frontmatter.date,
siteConfig.dateFromFormat
);
if (dateA.isBefore (dateB)) return 1;
if (dateB.isBefore (dateA)) return -1;
return 0;
});
// Prise en charge de la pagination des articles
const paginatedListingTemplate = chemin.resolve (
"./src/templates/paginatedListing/index.js"
);
const {postsPerPage} = config;
if (postsPerPage) {
// Récupère le nombre de pages pouvant être hébergées
const pageCount = Math.ceil (postsEdges.length / postsPerPage);
// Crée un tableau vide
Array.from ({length: pageCount}). ForEach ((__ value__, index) => {
const pageNumber = index + 1;
créer une page({
chemin: index === 0? `/ posts`:` / posts / $ {pageNumber} / `,
composant: paginatedListingTemplate,
le contexte: {
limite: postsPerPage,
sauter: index * postsPerPage,
nombre de pages,
currentPageNumber: pageNumber,
},
});
});
} autre {
// Chargez la page de destination à la place
créer une page({
chemin: `/`,
composant: landingPage,
});
}
};
Dans la fonction createPages nous utilisons l'assistant graphql fourni par Gatsby pour interroger les données de la couche de contenu. Nous avons utilisé une requête Graphql standard pour ce faire et passé une requête pour obtenir le contenu du type allMarkdownRemark . Puis nous avons avancé pour trier les messages par date de création.
Nous avons ensuite extrait une propriété postPerPage d'un objet de configuration importé, qui est utilisé pour réduire le nombre total de messages au nombre spécifié de messages pour un page unique.
Pour créer une page de liste qui prend en charge la pagination, nous devons passer la limite, le numéro de page et le nombre de pages à sauter au composant qui rendrait la liste. Nous y parvenons en utilisant la propriété context de l'objet de configuration createPage . Nous accèderons à ces propriétés à partir de la page pour faire une autre requête graphql pour récupérer les messages dans la limite.
Nous pouvons également remarquer que nous utilisons le même composant de modèle pour la liste, et seul le chemin change en utilisant l'index du tableau de blocs que nous avions défini à l'avance. Gatsby transmettra les données nécessaires pour une URL donnée correspondant à / {chunkIndex} de sorte que nous puissions avoir / pour les dix premiers messages et / 2 pour le dix articles suivants.
Rendu de la liste des articles
Le composant rendant ces pages peut être trouvé à l'adresse src / templates /singlePost/index.js du dossier du projet. Il exporte également un assistant graphql qui extrait la limite et le paramètre de requête de page qu'il a reçu du processus createPages pour interroger gatsby pour les messages dans la plage de la page en cours.
import React de "react";
import {graphql, Link} de "gatsby";
importer la mise en page depuis "../../layout";
importer PostListing de "../../components/PostListing";
import "./index.css";
const Pagination = ({currentPageNum, pageCount}) => {
const prevPage = currentPageNum - 1 === 1? "/": `/ $ {currentPageNum - 1} /`;
const nextPage = `/ $ {currentPageNum + 1} /`;
const isFirstPage = currentPageNum === 1;
const isLastPage = currentPageNum === pageCount;
revenir (
{! isFirstPage && Précédent }
{[...Array(pageCount)] .map ((_ val, index) => {
const pageNum = index + 1;
revenir (
{pageNum}
);
})}
{! isLastPage && Suivant }
);
};
export default (props) => {
const {data, pageContext} = accessoires;
const postEdges = data.allMarkdownRemark.edges;
const {currentPageNum, pageCount} = pageContext;
revenir (
);
};
/ * eslint no-undef: "off" * /
export const pageQuery = graphql`
query ListingQuery ($ skip: Int !, $ limit: Int!) {
allMarkdownRemark (
tri: {champs: [fields___date]ordre: DESC}
limite: limite $
sauter: $ skip
) {
bords {
nœud {
des champs {
limace
Date
}
extrait
il est temps de lire
frontmatter {
Titre
Mots clés
auteur
Catégorie
Date
}
}
}
}
}
`;
La page de publication
Pour afficher le contenu d'une page, nous devons créer par programme la page dans le fichier API gatsby-node.js . Tout d'abord, nous devons définir un nouveau composant pour rendre le contenu avec, pour cela, nous avons src / templates / singlePost / index.jsx .
import React de "react";
import {graphql, Link} de "gatsby";
importer _ de "lodash";
importer la mise en page depuis "../../layout";
import "./b16-tomorrow-dark.css";
import "./index.css";
importer des PostTags depuis "../../components/PostTags";
Exporter la classe par défaut PostTemplate étend React.Component {
render () {
const {data, pageContext} = this.props;
const {slug} = pageContext;
const postNode = data.markdownRemark;
const post = postNode.frontmatter;
if (! post.id) {
post.id = limace;
}
revenir (
);
}
}
/ * eslint no-undef: "off" * /
export const pageQuery = graphql`
requête BlogPostBySlug ($ slug: String!) {
markdownRemark (champs: {slug: {eq: $ slug}}) {
html
il est temps de lire
extrait
frontmatter {
Titre
Date
Catégorie
Mots clés
}
des champs {
limace
Date
}
}
}
`;
Encore une fois, nous utilisons un assistant graphQL pour extraire une page par une requête slug qui serait envoyée à la page via l'API createPages.
Ensuite, nous devrions avoir le code ci-dessous ajouté à gatsby- node.js à la fin de la fonction API createPages .
// Modèle à utiliser pour rendre le post converti en HTML
const postPage = chemin.resolve ("./ src / templates / singlePost / index.jsx");
// Boucle sur tous les nœuds post
postsEdges.forEach ((bord, index) => {
// Créer des pages de publication
créer une page({
chemin: edge.node.fields.slug,
composant: postPage,
le contexte: {
slug: edge.node.fields.slug,
},
});
});
Et nous pourrions visiter "/ {pageSlug}" et lui demander d'afficher le contenu du fichier de démarque de cette page au format HTML. Par exemple, http: // localhost: 8000 / the-butterfly-of-the-edge devrait charger le code HTML converti pour la démarque à: content / 2020_05 / 01.md , similaire à tous les slugs valides.
Rendu des catégories et des balises
Le composant de modèle de message unique contient un lien vers une page au format / categories / {categoryName} pour lister les messages avec des catégories similaires.
Nous pouvons d'abord saisir toutes les catégories et balises lorsque nous construisons la page de message unique dans le gatsby-node.js ]puis créez des pages pour chaque catégorie / balise capturée en passant le nom de la catégorie / balise.
Une modification de la section pour créer une page de publication unique dans le fichier gatsby-node.js ressemble à ceci: [19659015] const categorySet = new Set ();
const tagSet = new Set ();
const categoriesListing = chemin.resolve (
"./src/templates/categoriesListing/index.jsx"
);
// Modèle à utiliser pour afficher les articles en fonction des catégories
const tagsListingPage = chemin.resolve ("./ src / templates / tagsListing / index.jsx");
// Boucle sur tous les nœuds post
postsEdges.forEach ((bord, index) => {
// Génère une liste de catégories
if (edge.node.frontmatter.category) {
categorySet.add (edge.node.frontmatter.category);
}
// Génère une liste de balises
if (edge.node.frontmatter.tags) {
edge.node.frontmatter.tags.forEach ((tag) => {
tagSet.add (balise);
});
}
// Créer des pages de publication
créer une page({
chemin: edge.node.fields.slug,
composant: postPage,
le contexte: {
slug: edge.node.fields.slug,
},
});
});
Et à l'intérieur du composant pour lister les articles par balises, nous pouvons avoir la requête d'exportation pageQuery graphql pour les articles, y compris cette balise dans sa liste de balises. Nous utiliserons la fonction filter de graphql et l'opérateur $ in pour y parvenir:
// src / templates / tagsListing /
importer React depuis "react";
import {graphql} de "gatsby";
importer la mise en page depuis "../../layout";
importer PostListing de "../../components/PostListing";
export par défaut ({pageContext, data}) => {
const {tag} = pageContext;
const postEdges = data.allMarkdownRemark.edges;
revenir (
Messages publiés avec {tag}
);
};
/ * eslint no-undef: "off" * /
export const pageQuery = graphql`
query TagPage ($ tag: String) {
allMarkdownRemark (
limite: 1000
tri: {champs: [fields___date]ordre: DESC}
filtre: {frontmatter: {tags: {in: [$tag]}}}
) {
le compte total
bords {
nœud {
des champs {
limace
Date
}
extrait
il est temps de lire
frontmatter {
Titre
Mots clés
auteur
Date
}
}
}
}
}
`;
Et nous avons le même processus dans le composant de liste des catégories et la différence est que nous avons seulement besoin de trouver où les catégories correspondent exactement à ce que nous leur transmettons.
// src / templates / categoriesListing / index.jsx
importer React depuis "react";
import {graphql} de "gatsby";
importer la mise en page depuis "../../layout";
importer PostListing de "../../components/PostListing";
export par défaut ({pageContext, data}) => {
const {catégorie} = pageContext;
const postEdges = data.allMarkdownRemark.edges;
revenir (
Messages publiés dans {category}
);
};
/ * eslint no-undef: "off" * /
export const pageQuery = graphql`
query CategoryPage ($ category: String) {
allMarkdownRemark (
limite: 1000
tri: {champs: [fields___date]ordre: DESC}
filter: {frontmatter: {category: {eq: $ category}}}
) {
le compte total
bords {
nœud {
des champs {
limace
Date
}
extrait
il est temps de lire
frontmatter {
Titre
Mots clés
auteur
Date
}
}
}
}
}
`;
Remarquable, à l'intérieur des composants des balises et des catégories, nous rendons des liens vers la page de publication unique pour une lecture plus approfondie du contenu d'un article.
Ajout de la prise en charge des auteurs
Pour prendre en charge plusieurs auteurs, nous devons apporter quelques modifications au contenu de notre article et introduire de nouveaux concepts.
Charger des fichiers JSON
Premièrement, nous devrait pouvoir stocker le contenu des auteurs dans un fichier JSON comme celui-ci :
{
"mdField": "aleem",
"nom": "Aleem Isiaka",
"email": "aleem.isiaka@gmail.com",
"location": "Lagos, Nigéria",
"avatar": "https://api.adorable.io/avatars/55/abott@adorable.png",
"description": "Ouais, j'aime parfois les animaux mieux que les humains ... Surtout les chiens. Les chiens sont les meilleurs. Chaque fois que vous rentrez chez vous, ils agissent comme s'ils ne vous avaient pas vu depuis un an. Et ce qui est bien avec les chiens ... est-ce qu'ils ont des chiens différents pour différentes personnes. ",
"userLinks": [
{
"label": "GitHub",
"url": "https://github.com/limistah/modern-gatsby-starter",
"iconClassName": "fa fa-github"
},
{
"label": "Twitter",
"url": "https://twitter.com/limistah",
"iconClassName": "fa fa-twitter"
},
{
"label": "Email",
"url": "mailto:aleem.isiaka@gmail.com",
"iconClassName": "fa fa-envelope"
}
]
}
Nous les stockerions dans un répertoire d’auteurs à la racine de notre projet sous le nom / auteurs . Notez que l'auteur JSON a mdField qui serait l'identifiant unique du champ auteur que nous allons introduire dans le contenu du blog markdown; cela garantit que les auteurs peuvent avoir plusieurs profils.
Ensuite, nous devons mettre à jour gatsby-config.js plugins demandant à gatsby-source-filesystem de charger le contenu depuis le répertoire auteurs / dans le nœud Fichiers.
// gatsby-config.js
{
résoudre: `gatsby-source-filesystem`,
options: {
nom: "auteurs",
chemin: `$ {__ dirname} / auteurs /`,
},
}
Enfin, nous installerons gatsby-transform-json pour transformer les fichiers JSON créés pour une manipulation facile et un traitement approprié.
npm install gatsby-transformer-json --save
Et incluez-le dans les plugins de gatsby-config.js
module.exports = {
plugins: [
// ...other plugins
`gatsby-transformer-json`
],
};
Page Interrogation et création d'auteurs
Pour commencer, nous devons interroger tous les auteurs de notre répertoire auteurs / dans gatsby-config.js qui ont été chargé dans la couche de données, nous devons ajouter le code ci-dessous à createPages fonction API
const auteursListingPage = path.resolve (
"./src/templates/authorsListing/index.jsx"
);
const allAuthorsJson = attendre graphql (`
{
allAuthorsJson {
bords {
nœud {
id
avatar
mdField
emplacement
Nom
email
la description
userLinks {
iconClassName
étiquette
URL
}
}
}
}
}
`);
const auteursEdges = allAuthorsJson.data.allAuthorsJson.edges;
auteursEdges.forEach ((auteur) => {
créer une page({
chemin: `/ auteurs / $ {_. kebabCase (author.node.mdField)} /`,
composant: auteursListingPage,
le contexte: {
authorMdField: author.node.mdField,
authorDetails: author.node,
},
});
});
Dans cet extrait, nous extrayons tous les auteurs du type allAuthorsJson, puis appelons forEach sur les nœuds pour créer une page où nous passons le mdField pour distinguer l'auteur et l'auteur Détails pour des informations complètes sur l'auteur.
Rendu des messages de l'auteur
Dans le composant rendant la page qui se trouve à src / templates / auteursListing / index.jsx ]nous avons le contenu ci-dessous pour le fichier
import React de "react";
import {graphql} de "gatsby";
importer la mise en page depuis "../../layout";
importer PostListing de "../../components/PostListing";
importer AuthorInfo depuis "../../components/AuthorInfo";
export par défaut ({pageContext, data}) => {
const {authorDetails} = pageContext;
const postEdges = data.allMarkdownRemark.edges;
revenir (
Liste des auteurs
);
};
/ * eslint no-undef: "off" * /
export const pageQuery = graphql`
query AuthorPage ($ authorMdField: String) {
allMarkdownRemark (
limite: 1000
tri: {champs: [fields___date]ordre: DESC}
filter: {frontmatter: {author: {eq: $ authorMdField}}}
) {
le compte total
bords {
nœud {
des champs {
limace
Date
}
extrait
il est temps de lire
frontmatter {
Titre
Mots clés
auteur
Date
}
}
}
}
}
`;
Dans le code ci-dessus, nous avons exporté la pageQuery comme nous le faisons, pour créer une requête GraphQL afin de récupérer les messages correspondant à un auteur, nous utilisons l'opérateur $ eq pour obtenir
Conclusion
Dans Gatsby, nous pouvons interroger toutes les données qui existent à l'intérieur de sa couche d'accès aux données avec l'utilisation de la requête GraphQL et passer des variables en utilisant certaines constructions définies par l'architecture de Gatsby. nous avons vu comment nous pourrions utiliser l'assistant graphql à divers endroits et comprendre les modèles largement utilisés pour interroger les données sur les sites Web de Gatsby à l'aide de GraphQL.
GraphQL est très puissant et pourrait faire d'autres choses comme des données mutation sur un serveur. Gatsby n'a pas besoin de mettre à jour ses données à l'exécution, il ne prend donc pas en charge la fonction de mutation de GraphQL.
GraphQL est une excellente technologie, et Gatsby la rend très intéressante à utiliser dans leur cadre.
Références
(ra, il)
Source link