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

Posted 2023-03-08

【中文标题】什么是“StringQueryOperatorInput”类型？我怎样才能摆脱这个恼人的 graphql 错误？

【英文标题】：What is type "StringQueryOperatorInput"? How can I get rid of this annoying graphql error?

【发布时间】：2020-05-23 01:33:18

【问题描述】：

我正在尝试使用 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`,
  ],
;

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

【参考方案1】：

实际上字面意思在我发布这个问题后就找到了解决方案。我需要像这样设置我的查询：

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

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

【讨论】：

那么...值得删除您的问题吗？如果您立即找到它，那么假设其他人也会找到它是合理的。

Idk 是否值得删除，因为当我最初搜索术语 StringQueryOperatorInput 时，我找不到任何具体的参考或定义。因此，我认为将其保留下来会很好，以便其他人可以在上面看到丹尼尔的答案。

是的！不要删除！您可能已经能够快速找到答案，但这并不意味着其他人会。我也遇到了这个问题，如果不是这个答案，我仍然会对为什么我的查询不起作用感到困惑。

@Mike'Pomax'Kamermans 同样在这里，很高兴我找到了这篇文章，因为它对我有帮助。我不明白你居高临下的评论。

也很高兴你没有删除。迈克，有时人们会在 SO 上发布问题之前搜索几个小时。假设您所说的内容是不合理的。

【参考方案2】：

StringQueryOperatorInput 是clients 字段的id 参数的类型。 GraphQL 包括标量类型，如 String、ID 或 Int，以及描述更复杂数据结构（如数组或对象）的类型。在这种情况下，StringQueryOperatorInput 是一个输入对象类型——它描述了可以用作参数值或变量等输入的对象。

在过滤字段时，Gatsby 使用这样的输入对象来启用使用各种比较运算符来过滤暴露的数据——除了eq（等于），您还可以使用其他运算符，如ne、@ 987654332@、in、gt等。您可以查看完整列表here。因为并非所有输入都适用于所有标量（regex 对 String 字段有意义，但 lte 没有），每个标量都有不同的输入类型（IntQueryOperatorInput、BooleanQueryOperatorInput 等）

盖茨比exposes a GraphiQL endpoint in development。使用 GraphiQL 编写查询允许您利用自动完成和语法突出显示，这样您就可以避免像这样的意外语法错误。您还可以使用“文档”按钮来搜索和浏览整个架构。

【讨论】：

这让新用户感到困惑，因为在使用 GraphiQL 和 Gatsby 时，GraphQL 标准查询文档中的第一个示例（适用于自己的架构）会引发此错误。