Что такое тип "StringQueryOperatorInput"? Как я могу избавиться от этой надоедливой ошибки graphql?

Question

Я пытаюсь создать страницы Gatsby программно, используя API-интерфейс Gatsby createPages и данные из Firebase. Я успешно все настроил до того момента, когда данные Firebase доступны через GraphQL, и теперь я хочу запросить конкретные данные для каждой из новых страниц, которые были созданы с использованием идентификатора (в формате строки). Однако, когда я создаю компонент шаблона и пытаюсь запросить данные, я получаю эту ошибку:

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

Я везде искал ссылку на этот StringQueryOperatorInput и не могу найти ни одного информация об этом. Документы Google и 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. Все остальное работает нормально, я просто не могу получить этот запрос на шаблоне домовладельца. 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 / Домовладелец / Домовладелец. 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

StringQueryOperatorInput - это тип аргумента id поля clients. GraphQL включает скалярные типы, такие как String, ID или Int, а также типы, которые описывают более сложные структуры данных, такие как массивы или объекты. В этом случае StringQueryOperatorInput - это тип входного объекта - он описывает объекты, которые могут использоваться в качестве входных данных, например значения аргументов или переменные.

При фильтрации полей Гэтсби использует объект ввода например, чтобы разрешить использование различных операторов сравнения для фильтрации предоставляемых данных - помимо eq (равно), вы можете использовать другие операторы, такие как ne, regex, in, gt и т. д. c. Вы можете увидеть полный список здесь . Поскольку не все входные данные применяются ко всем скалярам (regex имеет смысл для поля String, но lte - нет), для каждого скаляра существует различный тип ввода (IntQueryOperatorInput, BooleanQueryOperatorInput и т. Д. c). )

Гэтсби предоставляет конечную точку GraphiQL в разработке . Написание запросов с использованием GraphiQL позволяет вам использовать автозаполнение и подсветку синтаксиса, чтобы вы могли избежать непредвиденных синтаксических ошибок, подобных этой. Вы также можете использовать кнопку «Документы» для поиска и просмотра всей схемы.

Answer 2

На самом деле буквально сразу после того, как я опубликовал этот вопрос, я нашел решение. Мне нужно было настроить мой запрос следующим образом:

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

Я предполагаю, что пропуская {eq: $ clientId}, выдает ошибку StringQuery на стороне GraphQL. Я до сих пор не знаю, что такое StringQueryOperatorInput , однако я успешно создал страницы с данными из firebase.