GatsbyJS - 向 graphQL 添加变量答案

【问题标题】：GatsbyJS - Adding Variables to graphQLGatsbyJS - 向 graphQL 添加变量
【发布时间】：2020-09-10 14:11:58
【问题描述】：

我正在构建一个动态 gatsby 应用程序，用户可以在其中登录并查看类别列表，以及每个类别的产品列表。当用户点击一个类别时，我想通过 graphQL 查询动态呈现相关产品。我想如何做到这一点是通过从 URL 中获取类别 slug 并将其传递给 graphQL 查询，但是当我传递变量时我不断收到错误。

我在下面粘贴了我的查询，没有变量。我想要一个变量 ${slug} 而不是“无服务器”。

export const query = graphql`
{ 
    fauna {
        slugMap (slug: "serverless"){
                data{
            name
            companies{
            data{
                name
                website
                description
            }
            }
        }

        }
  }
}
`

Gatsby-node.js

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  // Only update the `/app` page.
  if (page.path.match(/^\/map/)) {
    // page.matchPath is a special key that's used for matching pages
    // with corresponding routes only on the client.
    page.matchPath = "/map/*"
    // Update the page.
    createPage(page)
  }
}

【问题讨论】：

标签： javascript reactjs graphql gatsby

【解决方案1】：

为此，您需要将您的 graphql 查询更改为如下所示：

export const query = graphql`
{ 
    query FaunaBySlug($slug: String!) {
        fauna {
            slugMap (slug: {eq: $slug }){
                data {
                    name
                    companies {
                    data {
                        name
                        website
                        description
                    }
                }
            }
        }
    }
}

然后在您的gatsby-node 中，您需要通过上下文传递 slug。

  createPage({
    path: 'page/',
    component: template,
    context: {
      slug: category.slug,
    }
 });

【讨论】：

谢谢！看到我没有使用 Gatsby-node，我使用的是 gatsby-plugin-create-client-paths，可以这样做吗？
另外，您能解释一下我如何将选定的类别 slug 传递给 gatsby-node.js 吗？谢谢@CodeTisans
@LukeByrne 不知道如何使用客户端路径。但是，如果您想使用 gatsby-node 执行此操作，您只需从 gatsby-node 中的 GraphQL 获取类别，然后将其传递给 createPage，如我的评论中所示。这必须在构建时完成
谢谢！我已经更新了我的问题以包括我的 gatsby-node.js，因为我仍然不确定如何/在哪里实施您的建议，我将不胜感激。

【解决方案2】：

Gatsby 查询用于查询内部状态在开发或构建过程中 - 它在部署后不活动（不存在）。

对于动态查询，您需要活动/实时数据源 - f.e.一些graphql服务器。您可以使用 graphql 客户端（例如 apollo）或 fetch（POST json graphql 请求）。这在 gatsby dosc - data-fetching

中有解释

【讨论】：