Запрос Гэтсби работает в графическом редакторе, но не в реагирующем коде.

Question

Я работаю над блогом, используя Gatsby, и пытаюсь сгенерировать страницы на основе этого тега, на который нажимает пользователь.

Когда пользователь нажимает на тег, он должен быть перенаправлен на страницу, где отображается список статей с этим тегом.

Я создал запрос, который делает это. Однако мой запрос GraphQL работает в моем редакторе GraphQL, а не в моем коде реагирования. Он возвращает пустой массив в коде, но ожидаемый результат, когда я запускаю запрос в редакторе Graphql.

import React from "react"
import ArticleCard from "../articleCard/ArticleCard"
import Pagination from "../pagination/Pagination"

import articlesStyles from "./Articles.module.scss"
import { useStaticQuery, graphql } from "gatsby"

const Articles = ({ pageTitle }) => {
  const blogPosts = useStaticQuery(graphql`
    query($tag: String) {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___publish_date] },
        filter: { frontmatter: { tags: { in: [$tag] } } }
      ) {
        nodes {
          frontmatter {
            title
            publish_date
            imageUrl
            author
            category
          }
          fields {
            slug
          }
          excerpt(pruneLength: 100)
        }
      }
    }
  `)

  const nodes = blogPosts.allMarkdownRemark.nodes;
  console.log(nodes)
  return (
    <div className={articlesStyles.contentArea}>
      <h1 className={articlesStyles.headerTitle}>{pageTitle}</h1>
      <div className={articlesStyles.articles}>
        {nodes.map(node => {
          return (
            <ArticleCard
              key={node.id}
              {...node.frontmatter}
              excerpt={node.excerpt}
              slug={node.fields.slug}
            />
          )
        })}
      </div>
      <Pagination />
    </div>
  )
}

export default Articles

Answer 1

Как отметили @xadm и @ksav в своих комментариях:

"Известные ограничения useStaticQuery не принимает переменные"

Здесь в качестве обходного пути

Запросите все блоги, затем используйте Array.prototype.filter () , чтобы получить тот, который вам нужен:

// ...
  const blogPosts = useStaticQuery(graphql`
    query {
      allMarkdownRemark(
        sort: { order: DESC, fields: [frontmatter___publish_date] }
        // you can't filter here
      ) {
        nodes {
          frontmatter {
            title
            publish_date
            imageUrl
            author
            category
          }
          fields {
            slug
          }
          excerpt(pruneLength: 100)
        }
      }
    }
  `)

// Get all blogs
const { blogPosts: { allMarkdownRemark: { edges } } } = props;

// filter the blogs
const yourFilteredTag = edges.filter(
  el => el.node.childMarkdownRemark.frontmatter.tag === yourTagVariable);

// Now you can get the filtered list of blogs
console.log(yourFilteredTag);

// ...

Редактировать

Как @Albert Skibinski упомянул об этом Решение не масштабируется. Контекст в gatsby-node.js может быть лучшим решением в вашем случае использования.

Решение Array.prototype.filter (), которое я описал, должно быть зарезервировано для компонентов, где переменная context недоступна, и вы можете убедиться, что размер массива не будет чрезмерно большим.

Answer 2

Как уже упоминалось в комментариях, вы не можете использовать переменные в staticQuery .

Однако в будущем это может измениться, так как многие люди натыкаются на это ограничение, и работа продолжается для предоставления 'dynamicQueries'.

Тем временем вы может использовать переменные в запросах в gatsby- node.js и шаблонах, используемых API createPage. Таким образом, в вашем случае вы можете сгенерировать все страницы для всех тегов в gatsby- node.js и по-прежнему использовать ту же статью. js в качестве шаблона компонента.

См .: https://www.gatsbyjs.org/docs/adding-tags-and-categories-to-blog-posts/