Gatsby.js — useStaticQuery and Slugs

A Gatsby egy statikus webhely-keretrendszer, amely a Reacton alapul.

Használhatjuk statikus webhelyek létrehozására külső adatforrásokból és így tovább.

Ebben a cikkben megvizsgáljuk, hogyan hozhat létre webhelyet a Gatsby segítségével.

Lekérdezés a useStaticQuery Hook segítségével

A useStaticQuery hook segítségével lekérdezhetünk adatokat.

Például írhatjuk:

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: "My Homepage",
    description: "This is where I write my thoughts.",
  },
}

src/pages/index.js

import React from "react"
import { graphql, useStaticQuery } from 'gatsby'
export default function Home() {
  const data = useStaticQuery(graphql`
    query HeaderQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)
  return (
    <header>
      <h1>{data.site.siteMetadata.title}</h1>
    </header>
  )
}

A webhely metaadatai itt vannak: gatsby-config.js.

Ezután lekérdezhetjük őket az index.js fájlban.

A GraphQL lekérdezésünket a useStaticQuery hookba továbbítjuk.

És ez visszaadja a szükséges adatokat.

Ezután megjelenítjük a címet a JSX-ben.

A useStaticQuery horoggal saját horgokat készíthetünk.

Például írhatjuk:

import React from "react"
import { graphql, useStaticQuery } from 'gatsby'
const useSiteMetadata = () => {
  const { site } = useStaticQuery(
    graphql`
      query SiteMetaData {
        site {
          siteMetadata {
            title
            description
          }
        }
      }
    `
  )
  return site.siteMetadata
}
export default function Home() {
  const { title, description } = useSiteMetadata()
  return (
    <header>
      <h1>{title}</h1>
      <h1>{description}</h1>
    </header>
  )
}

A useStaticQuery horgot a useSiteMetadata horogban használtuk.

Visszaadjuk a siteMetadata értéket, és ezt használjuk a gatsby-config.js metaadatainak title és description tulajdonságainak megjelenítésére.

GraphQL Fragments

A GraphQL töredékek a lekérdezés újrafelhasználható részei.

Töredék létrehozásához a fragment kulcsszót használjuk.

Például írhatjuk:

import React from "react"
import { graphql } from 'gatsby'
export const query = graphql`
  fragment SiteInformation on Site {
    siteMetadata {
      title
      description
    }
  }
  query {
    site {
      ...SiteInformation
    }
  }
`
export default function Home({ data }) {
  return (
    <div>
      <h1>{data.site.siteMetadata.title}</h1>
      <p>{data.site.siteMetadata.siteDescription}</p>
    </div>
  )
}

A fragment értéket hozzáadjuk a query GraphQL lekérdezési objektumunkhoz.

A ... operátort használjuk a töredék alkalmazására a lekérdezésben.

Ezután az eredményt úgy jelenítjük meg, hogy megkapjuk az adatokat a data propból.

Csigák létrehozása oldalakhoz

Csigákat készíthetünk oldalainkhoz.

Például írhatjuk:

gatsby-node.js

const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

Ellenőrizzük a csomópont típusát.

Ha 'MarkdownRemark' , akkor a slug-ot a createFilePath metódussal hozzuk létre.

Ezután hívjuk a createNodeField-t, hogy hozzáadjuk a slug mezőt a lekérdezésünkhöz.

Ezután a GraphiQL-ben lekérdezhetjük a következő írással:

{
  allMarkdownRemark {
    edges {
      node {
        fields {
          slug
        }
      }
    }
  }
}

Ezután egy eredményt kell kapnunk, amely így néz ki:

{
  "data": {
    "allMarkdownRemark": {
      "edges": [
        {
          "node": {
            "fields": {
              "slug": "/post/"
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}

visszatért.

Következtetés

A useStaticQuery hook segítségével lekérdezhetünk adatokat Gatsby projektünkben.

Emellett töredékeket és csigákat is létrehozhatunk projektünkben.