获取数据 Gatsby.js 和内容答案

【问题标题】：Getting data Gatsby.js and contentful获取数据 Gatsby.js 和内容
【发布时间】：2021-02-28 22:02:26
【问题描述】：

我有包含不同 URL 的页面。现在我从所有页面获取所有数据，但我需要为不同的 URL 获取不同的数据。我试图过滤它，但得到错误。那么如何检查 url='something' 是否需要查询呢？

import React from "react";
import { StaticQuery, graphql } from "gatsby";
import ArticleMfo from "../components/articleMfo";

const Products = () => (
    <StaticQuery
        query={graphql`
            query MyQuery {
                allContentfulAllPages(filter: {link: {eq: $MYURL}}) {
                    edges {
                        node {
                            mfo {
                                __typename
                                ... on ContentfulBank {
                                    id
                                    text
                                    limit
                                    rate
                                    term
                                    link
                                    logo {
                                        title
                                        file {
                                            url
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        `}

    render={data =>  ( 
        <Container className="container">
            {data.allContentfulAllPages.edges.map(({ node }, i) => (
                <div>
                    {node.mfo.map(mfos => (
                        <ArticleMfo key={mfos.id} content={mfos} />
                    ))}
                </div>
            ))}
        </Container>
    )}
  />
);

export default Products

【问题讨论】：

错误是什么？ :)
我不记得了。我尝试了很多方法。你能告诉我如何查询它的正确方法吗？我最近才开始研究 react/gatsby。

标签： reactjs gatsby contentful

【解决方案1】：

静态查询（因此得名）不接受变量。从Static Query docs可以看到：

StaticQuery 不接受变量（因此命名为“静态”），但是可以在任何组件中使用，包括页面

如果您想过滤它，您需要使用页面查询并通过每个页面上的上下文传递变量名称 (MYURL)。在这种情况下，您需要将查询移动到gatsby-node.js，并在每次创建页面时，通过上下文传递变量以使其可用作过滤器。比如：

const path = require("path")

exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions

  const result = await graphql(
    `
      {
        allMarkdownRemark(limit: 1000) {
          edges {
            node {
              frontmatter {
                path
              }
            }
          }
        }
      }
    `
  )

  // Handle errors
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }


  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
    const path = node.frontmatter.path
    createPage({
      path,
      component: blogPostTemplate,
      // In your blog post template's graphql query, you can use pagePath
      // as a GraphQL variable to query for data from the markdown file.
      context: {
        pagePath: path,
      },
    })
  })
}

注意：替换上面的查询和数据的解析器。

使用上面的 sn-p，从 GraphQL 查询创建的每个页面都将通过上下文过滤可用的路径（如pagePath），使其适应您的需求。

【讨论】：