获取数据 Gatsby.js 并且内容丰富

Question

我的页面中包含不同的 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

Answer 1

静态查询（因此得名）不接受变量。从 Static Query docs:

可以看出

StaticQuery does not accept variables (hence the name “static”), but can be used in any component, including pages

如果要对其进行过滤，则需要使用页面查询并通过每个页面上的上下文传递变量名称 (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,
      },
    })
  })
}

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

使用上面的代码片段，从 GraphQL 查询创建的每个页面都将有可用的路径（如 pagePath）通过上下文进行过滤，使其适应您的需要。

获取数据 Gatsby.js 并且内容丰富

Getting data Gatsby.js and contentful

reactjs

contentful

gatsby