Что такое gatsbyContentfulFluid?

#javascript #reactjs #graphql #gatsby #contentful

#javascript #reactjs #graphql #gatsby #довольный

Вопрос:

Я изучаю Gatsby и GraphQL как новичок и следую этой статье https://ibaslogic.com/gatsby-with-contentful-cms /

В нем есть этот код:

 export const query = graphql`
  query($slug: String!) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      publishedDate(formatString: "Do MMMM, YYYY")
      featuredImage {
        fluid(maxWidth: 750) {
          ...GatsbyContentfulFluid
        }
      }
    }
  }
`
  

Я получаю все, но не получаю. ..GatsbyContentfulFluid на моем сервере запросов GraphQL.
Кто-
нибудь, пожалуйста, объясните, что ...GatsbyContentfulFluid это такое?
Почему мы используем его с оператором распространения?
и я что-то пропустил при создании содержательных данных, поэтому я не попадаю ...GatsbyContentfulFluid на свою игровую площадку для запросов GQL?

Комментарии:

1. это статья, за которой я следую ibaslogic.com/gatsby-with-contentful-cms

Ответ №1:

Это не оператор распространения, каким мы его знаем в JavaScript, в GraphQL он обозначает фрагмент запроса.

Фрагмент — это способ запроса набора полей с использованием повторно используемых единиц. Из документов GraphQL:

Допустим, у нас была относительно сложная страница в нашем приложении, которая позволяет нам смотреть на двух героев бок о бок вместе со своими друзьями. Вы можете себе представить, что такой запрос может быстро усложниться, потому что нам нужно будет повторить поля хотя бы один раз — по одному для каждой стороны сравнения.

Вот почему GraphQL включает в себя повторно используемые блоки, называемые фрагментами. Фрагменты позволяют создавать наборы полей, а затем включать их в запросы, где вам нужно. Вот пример того, как вы могли бы решить вышеуказанную ситуацию, используя фрагменты:

В вашем случае фрагмент предоставляется gatsby-source-contentful и, по сути, запрашивает изменяемый ресурс из Contentful, как вы обычно делаете при использовании gatsby-image для локальных файлов.

Другими словами, с ...GatsbyContentfulFluid помощью fragment вы извлекаете обязательные поля из ресурсов содержимого, которые позволяют вам использовать a gatsby-image внутри ресурса.

Фрагменты недоступны на игровой площадке GraphQL из-за ограничений GraphiQL:

Обратите внимание, что из-за ограничений GraphiQL в настоящее время вы не можете использовать эти фрагменты в среде разработки GraphiQL.

Итак, вы можете использовать фрагменты (действительно, вы должны), но вам нужно будет проверять полученные данные в вашем коде (через console.logs или через точки останова отладки) напрямую, поскольку они недоступны на игровой площадке GraphQL.

Комментарии:

1. спасибо Ферран за ответ, можете ли вы ответить еще на один вопрос, пожалуйста? в чем разница, когда мы используем graphql() в качестве вызова функции и graphql` с обратным отсчетом?

2. Это то же самое, но первый скоро устареет.