Catégories
Plugin et site web

Utilisation avancée de GraphQL dans les sites Web Gatsby – Smashing Magazine

Dans cet article, Aleem Isiaka explique ce que sont les constructions de requête GraphQL et comment elles peuvent être utilisées pour interagir avec la couche d'accès aux données d'un site Web Gatsby. Jetons un coup d'œil à certains des cas d'utilisation avancés de GraphQL dans un site Web Gatsby en utilisant des données correspondantes provenant de différentes sources.

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 constitué un changement majeur dans le développement logiciel.

En tant que générateur de site statique moderne, Gatsby exploite GraphQL pour fournir une méthodologie concise pour importer 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 toute société d’édition pour partager le contenu de leurs auteurs.

Qu'est-ce que GraphQL?

En passant par le QL en son nom, GraphQL est un langage de requête combiné à un ensemble d'outils créés pour offrir flexibilité et efficacité dans la manière 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 de 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 que le besoin d'extraire des données d'une source et de les transformer au format requis se produirait, 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 comme largement utilisées; certains de ces concepts sont:

Langage de définition de schéma

GraphQL SDL est un système de type intégré à 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 de la ! ils incluent, publient également des références à un autre type, Publier.

type Authors {
  name: String!,
  hobbies: (String)
  country: String!
  married: Boolean!
  posts: (Post!)
}

type Post {
  title: String!
  body: String!
}

type Query {
  author: Author
}

schema {
  query: Query
}

Requêtes

On peut utiliser Requêtes pour extraire des données d'une source GraphQL.

Considérant un ensemble de données comme ci-dessous

{
  data: {
    author: (
      {
        hobbies: ("travelling", "reading"),
        married: false,
        country: "Nigeria",
        name: "Aleem Isiaka",
        posts: (
          {
            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 publications à partir des données:

query {
  authors {
    country,
    posts {
      title
    }
  }
}

La réponse que nous obtiendrons doit contenir les données JSON des articles de blog avec juste le titre et rien de plus:

(
  { country: “Nigeria”, posts: ({...}, {...}, {...}) },
  { country: “Tunisia”, posts: () },
  { title: “Ghana”, posts: ()},
)

Nous pouvons également utiliser des arguments comme conditions pour une requête:

query {
  authors (country: “Nigeria”) {
    country,
    posts {
      title
    }
  }
}

Qui devrait revenir

(
  { country: “Nigeria”, posts: ({...}, {...}, {...}) }
)

Les champs imbriqués peuvent également être interrogés, comme les publications avec le type de publication, vous pouvez demander uniquement les titres:

query {
  authors(country: ‘Nigeria’) {
    country,
    posts {
      title
    }
  }
}

Et il devrait renvoyer tout type d'auteur correspondant Nigeria renvoyer le tableau de pays et d'articles 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, ce qui les rend facilement disponibles dans le navigateur sans serveur.

Pourtant, Gatsby peut fonctionner comme un serveur qui peut être interrogé par d'autres clients GraphQL, comme GraphiQL, dans un navigateur.

Gatsby Façons d'interagir 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 graphql helper dans le cadre des éléments du premier argument transmis à la fonction.

// gatsby-node.js source: https://www.gatsbyjs.org/docs/node-apis/#createPages
exports.createPages = async ({ graphql, actions }) => {
  const result = await graphql(`
    query loadPagesQuery ($limit: Int!) {
      allMarkdownRemark(limit: $limit) {
        edges {
          node {
            frontmatter {
              slug
            }
          }
        }
      }
    }`)
}

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 dans la couche de données Gatsby.

Composants de la page

Composants de page à l'intérieur du répertoire / pages ou modèles rendus par le createPage L'action de l'API peut importer graphql du gatsby module et exportez un pageQuery. À son tour, Gatsby injecterait un nouvel accessoire data dans les accessoires du composant de page contenant les données résolues.

import React from "react";
import { graphql } from "gatsby";

const Page = props => {
  return 

{JSON.stringify(props.data)}

; }; export const pageQuery = graphql` query { ... } `; export default Page;
Dans d'autres composants

D'autres composants peuvent importer graphql et StaticQuery composants du gatsby module, rendre le <StaticQuery/> en passant des accessoires de requête qui implémentent l'assistant Graphql et le rendent pour obtenir les données renvoyées.

import React from "react";
import { StaticQuery, graphql } from "gatsby";

const Brand = props => {
  return (
    

{data.site.siteMetadata.title}

); }; const Navbar = props => { return ( } /> ); }; export default Navbar;

Création d'un blog de publication Gatsby moderne et avancé

Dans cette section, nous allons parcourir un processus de création d'un blog prenant 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 des logiques 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, également le code est 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, remplacez la branche de travail par 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 à l'adresse http: // localhost: 8000.

git clone git@github.com:limistah/modern-gatsby-starter.git 
cd modern-gatsby-starter
git checkout dev-init
npm install
npm run develop

Visiter http: // localhost: 8000 affichera la page d'accueil par défaut de cette branche.

Création du contenu des articles de blog

Certains contenus de publication inclus dans le référentiel du projet sont accessibles dans la branche dev-blog-content. L'organisation du répertoire de contenu ressemble à ceci /content/YYYY_MM/DD.md, qui regroupent les publications par mois créé de l'année.

Le contenu du billet de blog a title, date, author, category, tags comme frontmatter, que nous utiliserons pour distinguer un article et effectuer un traitement supplémentaire, tandis que le reste du contenu est le corps de l'article.

title: "Bold Mage"
date: "2020-07-12"
author: "Tunde Isiaka"
category: "tech"
tags:
  - programming
  - stuff
  - Ice cream
  - other
---

# Donut I love macaroon chocolate bar

Oat cake marshmallow lollipop fruitcake I love jelly-o. Gummi bears cake wafer chocolate bar pie. Marshmallow pastry powder chocolate cake candy chupa chups. Jelly beans powder soufflé biscuit pie macaroon chocolate cake. Marzipan lemon drops chupa chups sweet cookie sesame snaps jelly halvah.

Affichage du contenu du message

Avant de pouvoir rendre nos publications Markdown en HTML, nous devons effectuer un certain traitement. Tout d'abord, charger les fichiers dans le stockage Gatsby, analyser le MD en HTML, relier 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 le 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 le rendu du markdown au format HTML.

Enfin, nous avons inclus des plugins dans le fonctionnement des nœuds générés par gatsby-transformer-remark.

Mettre en œuvre le gatsby-config.js Fichier API

À l'avenir, à l'intérieur de gatsby-node.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 de s'assurer que nous avons un slug défini sur les nœuds de remarque MarkDown. Nous écouterons l'API onCreateNode et ferons créer le nœud pour déterminer s'il s'agit d'un type de MarkdownRemark avant de mettre à jour le nœud pour inclure un slug et une date en conséquence.

const path = require("path");
const _ = require("lodash");
const moment = require("moment");

const config = require("./config");

// Called each time a new node is created
exports.onCreateNode = ({ node, actions, getNode }) => {
  // A Gatsby API action to add a new field to a node
  const { createNodeField } = actions;
  // The field that would be included
  let slug;
  // The currently created node is a MarkdownRemark type
  if (node.internal.type === "MarkdownRemark") {
    // Recall, we are using gatsby-source-filesystem?
    // This pulls the parent(File) node,
    // instead of the current MarkdownRemark node
    const fileNode = getNode(node.parent);
    const parsedFilePath = path.parse(fileNode.relativePath);
    if (
      Object.prototype.hasOwnProperty.call(node, "frontmatter") &&
      Object.prototype.hasOwnProperty.call(node.frontmatter, "title")
    ) {
      // The node is a valid remark type and has a title,
      // Use the title as the slug for the node.
      slug = `/${_.kebabCase(node.frontmatter.title)}`;
    } else if (parsedFilePath.name !== "index" && parsedFilePath.dir !== "") {
      // File is in a directory and the name is not index
      // e.g content/2020_02/learner/post.md
      slug = `/${parsedFilePath.dir}/${parsedFilePath.name}/`;
    } else if (parsedFilePath.dir === "") {
      // File is not in a subdirectory
      slug = `/${parsedFilePath.name}/`;
    } else {
      // File is in a subdirectory, and name of the file is index
      // e.g content/2020_02/learner/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(new Date(node.frontmatter.date), "DD/MM/YYYY");
        if (!date.isValid)
          console.warn(`WARNING: Invalid date.`, node.frontmatter);
        // MarkdownRemark does not include date by default

        createNodeField({ node, name: "date", value: date.toISOString() });
      }
    }
    createNodeField({ node, name: "slug", value: slug });
  }
};

La liste des articles

À ce stade, nous pouvons implémenter le createPages API pour interroger toutes les démarques et créer une page avec le chemin comme slug que nous avons créé ci-dessus. Voyez-le sur Github.

//gatsby-node.js
// previous code

// Create Pages Programatically!
exports.createPages = async ({ graphql, actions }) => {
  // Pulls the createPage action from the Actions API
  const { createPage } = actions;

  // Template to use to render the post converted HTML
  const postPage = path.resolve("./src/templates/singlePost/index.js");

  // Get all the markdown parsed through the help of gatsby-source-filesystem and gatsby-transformer-remark
  const allMarkdownResult = await graphql(`
    {
      allMarkdownRemark {
        edges {
          node {
            fields {
              slug
            }
            frontmatter {
              title
              tags
              category
              date
              author
            }
          }
        }
      }
    }
  `);

  // Throws if any error occur while fetching the markdown files
  if (allMarkdownResult.errors) {
    console.error(allMarkdownResult.errors);
    throw allMarkdownResult.errors;
  }

  // Items/Details are stored inside of edges
  const postsEdges = allMarkdownResult.data.allMarkdownRemark.edges;

  // Sort posts
  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;
  });

  // Pagination Support for posts
  const paginatedListingTemplate = path.resolve(
    "./src/templates/paginatedListing/index.js"
  );

  const { postsPerPage } = config;
  if (postsPerPage) {
    // Get the number of pages that can be accommodated
    const pageCount = Math.ceil(postsEdges.length / postsPerPage);

    // Creates an empty array
    Array.from({ length: pageCount }).forEach((__value__, index) => {
      const pageNumber = index + 1;
      createPage({
        path: index === 0 ? `/posts` : `/posts/${pageNumber}/`,
        component: paginatedListingTemplate,
        context: {
          limit: postsPerPage,
          skip: index * postsPerPage,
          pageCount,
          currentPageNumber: pageNumber,
        },
      });
    });
  } else {
    // Load the landing page instead
    createPage({
      path: `/`,
      component: landingPage,
    });
  }
};

dans le createPages fonction, nous utilisons la graphql helper 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 avons passé une requête pour obtenir le contenu de allMarkdownRemark type. Ensuite, avancez pour trier les messages par date de création.

Nous avons ensuite tiré un postPerPage propriété d'un objet de configuration importé, qui est utilisé pour réduire le nombre total de publications au nombre spécifié de publications pour une seule page.

Pour créer une page de liste qui prend en charge la pagination, nous devons transmettre la limite, pageNumber et le nombre de pages à passer au composant qui rendrait la liste. Nous y parvenons en utilisant la propriété context du createPage objet de configuration. Nous accèderons à ces propriétés depuis la page pour faire une autre requête graphql pour récupérer les publications dans la limite.

Nous pouvons également remarquer que nous utilisons le même composant de modèle pour la liste, et que 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 correspondante /{chunkIndex}, afin que nous puissions avoir / pour les dix premiers messages, et /2 pour les dix prochains messages.

Page d'accueil du blog moderne
Page d'accueil du blog moderne (grand aperçu)

Rendu de la liste des articles

Le composant rendant ces pages peut être trouvé à src/templates/singlePost/index.js du dossier du projet. Il exporte également un graphql helper 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 publications dans la plage de la page actuelle.

import React from "react";
import { graphql, Link } from "gatsby";
import Layout from "../../layout";
import PostListing from "../../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;

  return (
    
{!isFirstPage && Previous} {(...Array(pageCount)).map((_val, index) => { const pageNum = index + 1; return ( {pageNum} ); })} {!isLastPage && Next}
); }; export default (props) => { const { data, pageContext } = props; const postEdges = data.allMarkdownRemark.edges; const { currentPageNum, pageCount } = pageContext; return (
); }; /* eslint no-undef: "off" */ export const pageQuery = graphql` query ListingQuery($skip: Int!, $limit: Int!) { allMarkdownRemark( sort: { fields: (fields___date), order: DESC } limit: $limit skip: $skip ) { edges { node { fields { slug date } excerpt timeToRead frontmatter { title tags author category date } } } } } `;

La page de publication

Pour afficher le contenu d'une page, nous devons créer par programme la page à l'intérieur du gatsby-node.js Fichier API. Tout d'abord, nous devons définir un nouveau composant avec lequel rendre le contenu, pour cela, nous avons src/templates/singlePost/index.jsx.

import React from "react";
import { graphql, Link } from "gatsby";
import _ from "lodash";
import Layout from "../../layout";
import "./b16-tomorrow-dark.css";
import "./index.css";
import PostTags from "../../components/PostTags";

export default class PostTemplate extends React.Component {
  render() {
    const { data, pageContext } = this.props;
    const { slug } = pageContext;
    const postNode = data.markdownRemark;
    const post = postNode.frontmatter;
    if (!post.id) {
      post.id = slug;
    }

    return (
      
        

{post.title}

Posted to{" "} {post.category}
); } } /* eslint no-undef: "off" */ export const pageQuery = graphql` query BlogPostBySlug($slug: String!) { markdownRemark(fields: { slug: { eq: $slug } }) { html timeToRead excerpt frontmatter { title date category tags } fields { slug 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 du createPages Fonction API.

// Template to use to render the post converted HTML
  const postPage = path.resolve("./src/templates/singlePost/index.jsx");

// Loops through all the post nodes
postsEdges.forEach((edge, index) => {
  // Create post pages
  createPage({
    path: edge.node.fields.slug,
    component: postPage,
    context: {
      slug: edge.node.fields.slug,
    },
  });
});

Et nous pourrions visiter "/ {pageSlug}" et lui demander d'afficher le contenu du fichier de démarque pour cette page au format HTML. À titre d'exemple, http: // localhost: 8000 / the-butterfly-of-the-edge devrait charger le HTML converti pour la démarque à: content/2020_05/01.md, similaire à tous les slugs valides. Génial!

Page de publication de blog moderne
Page de publication de blog moderne (grand aperçu)
Rendu des catégories et des étiquettes

Le composant de modèle de publication unique a un lien vers une page au format /categories/{categoryName} pour répertorier les articles avec des catégories similaires.

Nous pouvons d'abord attraper toutes les catégories et balises lorsque nous construisons la page de publication unique dans le gatsby-node.js fichier, 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 gatsby-node.js ressemble à ceci:

const categorySet = new Set();
const tagSet = new Set();


const categoriesListing = path.resolve(
  "./src/templates/categoriesListing/index.jsx"
);
// Template to use to render posts based on categories
const tagsListingPage = path.resolve("./src/templates/tagsListing/index.jsx");

// Loops through all the post nodes
postsEdges.forEach((edge, index) => {
  // Generate a list of categories
  if (edge.node.frontmatter.category) {
    categorySet.add(edge.node.frontmatter.category);
  }

  // Generate a list of tags
  if (edge.node.frontmatter.tags) {
    edge.node.frontmatter.tags.forEach((tag) => {
      tagSet.add(tag);
    });
  }

  // Create post pages
  createPage({
    path: edge.node.fields.slug,
    component: postPage,
    context: {
      slug: edge.node.fields.slug,
    },
  });
});

Et à l'intérieur du composant permettant de répertorier les articles par balises, nous pouvons avoir le pageQuery Exporter la requête graphql pour les articles, y compris cette balise dans sa liste de balises. Nous utiliserons le filter fonction de graphql et de l'opérateur $ in pour y parvenir:

// src/templates/tagsListing/

import React from "react";
import { graphql } from "gatsby";
import Layout from "../../layout";
import PostListing from "../../components/PostListing";

export default ({ pageContext, data }) => {
  const { tag } = pageContext;
  const postEdges = data.allMarkdownRemark.edges;
  return (
    
      
Posts posted with {tag}
); }; /* eslint no-undef: "off" */ export const pageQuery = graphql` query TagPage($tag: String) { allMarkdownRemark( limit: 1000 sort: { fields: (fields___date), order: DESC } filter: { frontmatter: { tags: { in: ($tag) } } } ) { totalCount edges { node { fields { slug date } excerpt timeToRead frontmatter { title tags author date } } } } } `;

Et nous avons le même processus dans le composant de liste des catégories, et la différence est que nous devons seulement trouver où les catégories correspondent exactement à ce que nous leur transmettons.

// src/templates/categoriesListing/index.jsx
import React from "react";
import { graphql } from "gatsby";
import Layout from "../../layout";
import PostListing from "../../components/PostListing";

export default ({ pageContext, data }) => {
  const { category } = pageContext;
  const postEdges = data.allMarkdownRemark.edges;
  return (
    
      
Posts posted to {category}
); }; /* eslint no-undef: "off" */ export const pageQuery = graphql` query CategoryPage($category: String) { allMarkdownRemark( limit: 1000 sort: { fields: (fields___date), order: DESC } filter: { frontmatter: { category: { eq: $category } } } ) { totalCount edges { node { fields { slug date } excerpt timeToRead frontmatter { title tags author date } } } } } `;

Remarquable, à l'intérieur des composants de balises et de catégories, nous rendons des liens vers la page de publication unique pour une lecture plus approfondie du contenu d'un article.

Page de message unique Hello World avec étiquette
Message moderne avec la catégorie étiquetée (Grand aperçu)

Ajout de la prise en charge pour les 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

Tout d'abord, nous devrions pouvoir stocker le contenu des auteurs dans un fichier JSON comme celui-ci:

{
  "mdField": "aleem",
  "name": "Aleem Isiaka",
  "email": "aleem.isiaka@gmail.com",
  "location": "Lagos, Nigeria",
  "avatar": "https://api.adorable.io/avatars/55/abott@adorable.png",
  "description": "Yeah, I like animals better than people sometimes... Especially dogs. Dogs are the best. Every time you come home, they act like they haven’t seen you in a year. And the good thing about dogs... is they got different dogs for different people.",
  "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 le répertoire d’un auteur à la racine de notre projet en tant que /authors. Notez que l'auteur JSON a mdField ce 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 instruction gatsby-source-filesystem pour charger le contenu du authors/ répertoire dans le nœud Fichiers.

// gatsby-config.js
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: "authors",
    path: `${__dirname}/authors/`,
  },
}

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 Interroger et créer des auteurs

Pour commencer, nous devons interroger tous les auteurs de notre authors/ répertoire à l'intérieur de gatsby-config.js qui ont été chargés dans la couche de données, nous devons ajouter le code ci-dessous à createPages Fonction API

const authorsListingPage = path.resolve(
  "./src/templates/authorsListing/index.jsx"
);

const allAuthorsJson = await graphql(`
  {
    allAuthorsJson {
      edges {
        node {
          id
          avatar
          mdField
          location
          name
          email
          description
          userLinks {
            iconClassName
            label
            url
          }
        }
      }
    }
  }
`);

const authorsEdges = allAuthorsJson.data.allAuthorsJson.edges;
authorsEdges.forEach((author) => {
  createPage({
    path: `/authors/${_.kebabCase(author.node.mdField)}/`,
    component: authorsListingPage,
    context: {
      authorMdField: author.node.mdField,
      authorDetails: author.node,
    },
  });
});

Dans cet extrait de code, nous tirons 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 le authorDetails pour des informations complètes sur l'auteur.

Rendu des messages de l'auteur

Dans le composant rendant la page qui pouvait être trouvée à src/templates/authorsListing/index.jsx, nous avons le contenu ci-dessous pour le fichier

import React from "react";
import { graphql } from "gatsby";
import Layout from "../../layout";
import PostListing from "../../components/PostListing";
import AuthorInfo from "../../components/AuthorInfo";

export default ({ pageContext, data }) => {
  const { authorDetails } = pageContext;
  const postEdges = data.allMarkdownRemark.edges;
  return (
    
      

Author Roll

); }; /* eslint no-undef: "off" */ export const pageQuery = graphql` query AuthorPage($authorMdField: String) { allMarkdownRemark( limit: 1000 sort: { fields: (fields___date), order: DESC } filter: { frontmatter: { author: { eq: $authorMdField } } } ) { totalCount edges { node { fields { slug date } excerpt timeToRead frontmatter { title tags author date } } } } } `;

Dans le code ci-dessus, nous avons exporté le pageQuery comme nous le faisons, pour créer une requête GraphQL afin de récupérer les publications correspondant à un auteur, nous utilisons le $eq opérateur pour y parvenir génèrent des liens vers une seule page de publication pour une lecture plus approfondie.

Page d'auteur de blog moderne
Page d'auteur de blog moderne (grand aperçu)

Conclusion

Dans Gatsby, nous pouvons interroger toutes les données qui existent à l'intérieur de sa couche d'accès aux données à l'aide de la requête GraphQL et transmettre des variables à l'aide de certaines constructions définies par l'architecture de Gatsby. nous avons vu comment nous pourrions utiliser le graphql helper dans 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 la mutation de données sur un serveur. Gatsby n'a pas besoin de mettre à jour ses données lors de l'exécution, il ne prend donc pas en charge la fonction de mutation de GraphQL.

GraphQL est une excellente technologie, et Gatsby le rend très intéressant à utiliser dans leur cadre.

Références

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *