什么是“StringQueryOperatorInput”类型？我怎样才能摆脱这个烦人的 graphql 错误？

Question

我正在尝试使用 Gatsby API createPages 和来自 Firebase 的数据以编程方式创建 Gatsby 页面。我已经成功设置了所有内容，直到可以通过 GraphQL 访问 Firebase 数据，现在我想查询使用 id（字符串格式）创建的每个新页面的特定数据。但是，当我创建模板组件并尝试查询数据时，出现此错误：

Variable "$clientId" of type "String!" used in position expecting type "StringQueryOperatorInput".

我到处寻找这个StringQueryOperatorInput的参考，但找不到任何关于它的信息。谷歌和 graphql 文档似乎没有提到这个词，这是我第一次看到它。经过一个小时的故障排除后，我得到了一个不同的错误：

If you're e.g. filtering for specific nodes make sure that you choose the correct field (that has the same type "String!") or adjust the context variable to the type "StringQueryOperatorInput".
File: src/templates/Homeowner/Homeowner.js:24:9

但是，我仍然不知道 StringQueryOperatorInput 是什么或如何解决这个问题。下面是我的这个组件的代码和我的 gatsby-node.js 和我的 gatsby-config.js，我使用插件来获取 Firebase 数据。我真的可以在这方面使用一些帮助，我似乎找不到这个 StringQueryOperatorInput 的任何参考。其他一切正常，我只是无法在 Homeowner.js 模板上运行此查询。

gatsby-node.js

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    query {
      allClients {
        nodes {
          firstName
          lastName
          id
        }
      }
    }
  `);
  console.log(JSON.stringify(result, null, 4));
  result.data.allClients.nodes.forEach(node => {
    const slug = `/client/${node.id}`;
    createPage({
      path: slug,
      component: require.resolve(`./src/templates/Homeowner/Homeowner.js`),
      context: { clientId: node.id },
    });
  });
};

src/templates/Homeowner/Homeowner.js

import React from 'react';
import { graphql } from 'gatsby';
import { withFirebase } from '../../components/Firebase';
import { withStyles } from '@material-ui/core/styles';
import Layout from '../../components/layout';

const Homeowner = ({ data }) => {
  console.log(data.clients, 'data');
  return (
    <>
      <Layout>
        <h1>Home Owner Component</h1>
        {/* <h3>{client.firstName}</h3>
        <h3>{client.lastName}</h3>
        <h3>{client.email}</h3> */}
      </Layout>
    </>
  );
};

export default Homeowner;

export const query = graphql`
  query($clientId: String!) {
    clients(id: $clientId) {
      firstName
      lastName
      email
    }
  }
`;

gatsby-config.js

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});
module.exports = {
  siteMetadata: {
    title: `SiteTitle`,
    siteUrl: `https://www.mysitwe.com`,
    description: `YourSite`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-firebase`,
      options: {
        credential: require('./firebase-key.json'),
        databaseURL: 'https://firebaseurl/',
        types: [
          {
            type: 'Clients',
            path: 'clients',
          },
          {
            type: 'Users',
            path: 'users',
          },
        ],
      },
    },
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Nunito Sans`,
            variants: [`400`, `600`, `800`],
          },
          {
            family: `Montserrat`,
            variants: [`300`, `400`, `400i`, `500`, `600`],
          },
          {
            family: `Spectral`,
            variants: [`400`, `600`, `800`],
          },
          {
            family: `Karla`,
            variants: [`400`, `700`],
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-plugin-offline`,
  ],
};

如果有人可以帮助我，请提前致谢。

Answer 1

其实从字面上我张贴了这个问题之后我找到了解决办法。我需要像这样设置我的查询：

export const query = graphql`
  query($clientId: String!) {
    clients(id: { eq: $clientId }) {
      firstName
      lastName
      email
    }
  }
`;

我假设省略 {eq: $clientId} 会在 GraphQL 端引发 StringQuery 错误。我仍然不知道StringQueryOperatorInput是什么，但是，我已经成功地使用来自 firebase 的数据生成了页面。

Answer 2

StringQueryOperatorInput是字段参数的类型。GraphQL 包括标量类型（如、或 ）以及描述更复杂数据结构（如数组或对象）的类型。在本例中，是输入对象类型——它描述了可用作参数值或变量等输入的对象。idclientsStringIDIntStringQueryOperatorInput

在过滤字段时，Gatsby 使用这样的输入对象来启用使用各种比较运算符来过滤公开的数据 - 除了eq(等于) 之外，您还可以使用其他运算符，例如ne, regex, in,gt等。您可以看到完整的列在这里。因为并非所有输入都适用于所有标量（regex对于字段有意义String，但lte没有），因此每个标量都有不同的输入类型（IntQueryOperatorInput、BooleanQueryOperatorInput等）

Gatsby在开发中公开了一个 GraphiQL 端点。使用 GraphiQL 编写查询允许您利用自动完成和语法突出显示，从而避免此类意外语法错误。您还可以使用“文档”按钮来搜索和浏览整个架构。