Невозможно отфильтровать пользовательские данные в siteMetaData в Gatsby, используя GraphQL в GraphiQL - PullRequest
0 голосов
/ 30 апреля 2020

Я создал базовый c сайт Гэтсби со стартером по умолчанию. Сейчас я пытаюсь добавить некоторые пользовательские данные (массив people) в 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, это моя конечная цель. Итак, сначала я сделал базовый c тест:

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

Это работает, я возвращаю всех людей обратно. Затем я попытался:

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

Это приводит меня к ошибке "Неизвестный аргумент продаж на полевых людях типа SiteSiteMetadata". Это вроде как говорит мне, что Сифт под Гэтсби не имеет никакого представления о моих настраиваемых полях в своей схеме, что может иметь для меня смысл. Итак, в качестве теста я пробую это:

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

Я ожидаю, что запрос выполняется успешно, но возвращает пустой набор результатов, поскольку значение элемента author не равно none. Но вместо этого я получаю ту же ошибку basi c, но теперь говорю мне «Неизвестный автор аргументов в поле siteMetadata типа Site», и теперь я запутался, потому что кажется, что он должен знать о тех полях, даже если он не знает о произвольных я добавляю. С другой стороны, возможно, этот запрос не будет работать, потому что существует только один объект siteMetaData, а не попытка запроса массива. Я не уверен.

Итак, я провожу некоторые исследования и вижу ссылку на «фильтр», поэтому я пытаюсь сделать это сейчас:

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

Это меня заводит «Фильтр неизвестных аргументов» на поле siteMetadata типа Site. "

А теперь у меня возникли некоторые идеи.

Я нашел один пост, который, возможно, подразумевал, что вы не можете запрашивать пользовательские элементы данных как это вообще, но некоторые ответы, кажется, подразумевают, что вы, на самом деле, можете (и ясно, что первый тест сработал, поэтому данные найдены, я просто не могу заставить работать фильтрацию). Может быть, я использую неправильный синтаксис, но если это так, то я не могу найти, как выглядит правильный синтаксис (и что хуже, что в документах Gatsby, ОДИН пример, который МОЖЕТ дать мне ответ, является ошибкой на игровой площадке, и я не вижу код).

Кажется, что это так просто, но я в растерянности. Любая помощь будет принята с благодарностью. Спасибо!


РЕДАКТИРОВАТЬ: После того, как я написал это, я попытался поместить данные в отдельный файл, который загружается с плагином gatsby-transformer- json, и попытался запросить это. Данные загружаются, но я все еще не могу отфильтровать запрос. Я могу сделать:

{
  testData {
    people {
      name
      sales
    }
  }
}

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

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

... или ...

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

... я получаю такие же ошибки. Итак, я думаю, что, по крайней мере, это доказывает, что проблема не в том, чтобы запрашивать его непосредственно у siteMetaData, но я до сих пор не знаю, как заставить его делать то, что я хочу.

Для тех, кто хочет воспроизвести это , просто добавьте данные файла. json в root проекта с таким содержимым:

{
  "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:

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

Никаких других изменений по сравнению с изначально созданным проектом не требуется. Затем просто зайдите в GraphiQL и попробуйте выполнить запросы выше.

Или, чтобы упростить задачу, я создал экземпляр codesandbox, который демонстрирует это:

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

Затем я поместил его в свой основной компонент Layout. Я получаю такую ​​же ошибку (о фильтре, являющемся неизвестным аргументом), а не вижу мои данные Если я удаляю фильтр, я вижу ВСЕ данные. Итак, опять же, я не могу понять, почему просто фильтр не работает, но вот к чему я его сузил.

...