0

我已经使用默认启动器创建了一个基本的 Gatsby 站点。我现在正在尝试向 gatsby-config.json 添加一些自定义数据（人员数组），如下所示：

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `XXX`,
    author: `@gatsbyjs`,
    people : [
      { id : 1234, name : "Bill Smith", sales : 143, birthdate : "2233-03-22" },
      { id : 5678, name : "Roger Miller", sales : 281, birthdate : "2230-01-06" }
    ]
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    { resolve: `gatsby-source-filesystem`,
      options: { name: `images`, path: `${__dirname}/src/images`, }
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    { resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`, short_name: `starter`, start_url: `/`,
        background_color: `#663399`, theme_color: `#663399`, display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`
      }
    }
  ]
}

然后，在 GraphiQL 中，我要做的是查询人员列表，但仅限于销售额超过 200 人的人员，这是我的最终目标。所以首先，我做了一个基本的测试：

{
  site {
    siteMetadata {
      people {
        name
      }
    }
  }
}

那行得通，我让所有人都回来了。然后，我尝试了：

{
  site {
    siteMetadata {
      people(sales: { gt: 200 }) {
        name
      }
    }
  }
}

这让我收到一个错误“SiteSiteMetadata 类型的现场人员的未知参数销售”。这似乎在告诉我 Gatsby 下的 Sift 在其架构中没有任何关于我的自定义字段的概念，这对我来说有点意义。所以，作为一个测试，我试试这个：

{
  site {
    siteMetadata(author: { eq: "none" }) {
      author
      title
    }
  }
}

我的期望是查询成功运行但返回一个空结果集，因为作者元素的值不是“无”。但是相反，我得到了相同的基本错误，但现在告诉我“站点类型的字段 siteMetadata 上的未知参数作者”，现在我很困惑，因为即使它不知道任意字段，它似乎也应该知道这些字段我加。再说一次，也许该查询永远不会起作用，因为只有一个 siteMetaData 对象而不是尝试查询数组。我不确定。

所以然后我做了一些研究，我看到了一些对“过滤器”的引用，所以我现在试试这个：

{
  site {
    siteMetadata(filter: { eq: "none" }) {
      author
      title
    }
  }
}

这让我得到“站点类型的字段 siteMetadata 上的未知参数过滤器”。

现在我有点没有想法了。

我确实找到了一篇似乎可能暗示您根本无法像这样查询自定义数据元素的帖子，但有些回复似乎暗示您实际上可以（并且显然第一次测试有效，因此找到了数据，我只是无法让过滤工作）。也许我使用了错误的语法，但如果是这样，那么我似乎无法找到正确的语法是什么样的（更糟糕的是，在 Gatsby 文档中，可能为我提供答案的一个例子是错误的在操场上，我看不到代码）。

这似乎是一件很简单的事情，但我不知所措。任何帮助将不胜感激。谢谢！

编辑：在我写完这个之后，我尝试将数据放在一个单独的文件中，该文件使用 gatsby-transformer-json 插件加载并尝试查询它。数据已加载，但我仍然无法过滤查询。我可以：

{
  testData {
    people {
      name
      sales
    }
  }
}

...这很有效，可以很好地返回我的数据。但如果我尝试：

{
  testData {
    people(sales:{gt:200}) {
      name
      sales
    }
  }
}

...或者...

{
  testData {
    people(filter:{sales:{gt:200}}) {
      name
      sales
    }
  }
}

...我得到相同类型的错误。所以，我认为至少证明这不是专门从 siteMetaData 查询它的问题，但我仍然不知道如何让它做我想做的事。

对于任何想要重现此内容的人，只需在项目的根目录中添加文件 data.json 并包含以下内容：

{
  "people" : [
    { "id" : 1234, "name" : "Bill Smith", "sales" : 143, "birthdate" : "2233-03-22" },
    { "id" : 5678, "name" : "Roger Miller", "sales" : 281, "birthdate" : "2230-01-06" }
  ]
}

然后，将其添加到 gatsby-config.json 中的 plugins 数组中：

{
  resolve: `gatsby-transformer-json`,
  options: { typeName: `testData` }
},
{
  resolve: `gatsby-source-filesystem`,
  options: { name: `data`, path: `${__dirname}/data.json` }
}

不需要对最初生成的项目进行其他更改。然后，只需跳入 GraphiQL 并尝试执行上面的查询。

或者，为了让事情更容易，我创建了一个代码框实例来演示这一点：

https://codesandbox.io/s/gatsby-graphql-querying-json-issue-47km4

EDIT2：我认为这可能是 GraphiQL 本身的问题。所以，我创建了一个简单的组件：

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

const Test = () => {

const testData = useStaticQuery(graphql`
  query TestDateQuery {
    testData(filter: {sales: {gte:200}}) {
      people {
        name
      }
    }
  }
`)
console.log("testData", testData);

  return (
    <div />
  )
}

export default Test

然后我把它放到我的主要布局组件中。我得到了同样的错误（关于过滤器是一个未知的参数），而不是看到我的数据。如果我删除过滤器，我会看到所有数据。所以，再一次，我不知道为什么只是过滤器不起作用，但这就是我缩小范围的原因。

4

0 回答 0