Блог

Как я могу отображать данные из типов полей ссылок Contentful? Я могу запрашивать данные в graphql и даже использовать их в react для фильтрации сообщений на моем сайте с помощью;

 query TestQuery {
  allContentfulPost {
    edges {
      node {
        categories {
          title
          slug
        }
      }
    }
  }
}
 

Но когда я пытаюсь отобразить его для отображения на странице, он показывает пустые разделы. Однако я могу отображать все другие типы полей, не работает только поле ссылок.

Данные ссылочного поля в Contentful:

Данные ссылочного поля, полученные в graphql:

Простой тестовый код:

 import React from "react"
import { useStaticQuery, graphql } from "gatsby"

import Layout from "../components/Layout.js"

const TestPage = () => {
  const data = useStaticQuery(graphql`
    query TestQuery {
      allContentfulPost {
        edges {
          node {
            categories {
              title
              slug
            }
          }
        }
      }
    }
  `)

  return (
    <Layout>
      {data.allContentfulPost.edges.map(({ node }) => {
        return (
          <div key={node.slug}>
            {node.categories.title}
            Reference fields should be here but their not 😭
          </div>
        )
      })}
    </Layout>
  )
}

export default TestPage
 

Данные ссылочного поля не отображаются в React:

//

Обновить:

Я провел несколько проб и ошибок с фрагментами GraphQL, как было предложено Ферраном ниже, и я могу просматривать данные в localhost: 8000 / ___graphql с помощью;

 query TestQuery {
      allContentfulPost {
        edges {
          node {
            categories {
              ... on ContentfulCategory {
                title
                slug
              }
            }
          }
        }
      }
    }
 

Однако отображаемые divs по-прежнему пусты. Нужно ли мне изменить путь к источнику данных «{node.categories.title}» в функции возврата, чтобы он работал? Может быть, мне нужно добавить что-то между «node» и «categories», чтобы ссылаться на «… на contentfulкатегорию», добавленную в запрос graphql? Если да, то как я должен это написать? Я пробовал «{node.oncontentfulcategory.categories.title}», но это не сработало. Еще раз спасибо

 import React from "react"
import { useStaticQuery, graphql } from "gatsby"

import Layout from "../components/Layout.js"

const TestPage = () => {
  const data = useStaticQuery(graphql`
    query TestQuery {
      allContentfulPost {
        edges {
          node {
            categories {
              ... on ContentfulCategory {
                title
                slug
              }
            }
          }
        }
      }
    }
  `)

  return (
    <Layout>
      {data.allContentfulPost.edges.map(({ node }) => {
        return (
          <div key={node.slug}>
            {node.categories.title}
            What path should I now use for the data source in the line above?
          </div>
        )
      })}
    </Layout>
  )
}

export default TestPage
 

Вам нужно добавить фрагменты GraphQL в ваши запросы для доступа к ссылочным данным. У вас плохой пример в Gatsby docs ( gatsby-source-contentful ) или в некоторых других потоках GitHub.

Плагин выведет ссылки на вашу схему и создаст соответствующие узлы, что позволит вам использовать их в своих запросах для извлечения необходимых данных. Вы должны сделать несколько проб и ошибок в вашем localhost: 8000 / ___graphql, чтобы убедиться, что ваша модель работает правильно, без этого трудно угадать, как должен выглядеть запрос, но это должно быть что-то вроде этого:

   const data = useStaticQuery(graphql`
    query TestQuery {
      allContentfulPost {
        edges {
          node {
            categories {
                 title
                 slug
                 __typename
               ...on contentfulCategories{
                 #your category fields
              }
            }
          }
        }
      }
    }
  `)
 

Дополнительные ссылки / статьи:

• https://medium.com/@Zepro/contentful-reference-fields-with-gatsby-js-graphql-9f14ed90bdf9