Блог

Главная - Вопросы по программированию - Gatsby и GraphQL: доступ к данным на странице шаблона

Gatsby и GraphQL: доступ к данным на странице шаблона

#reactjs #graphql #gatsby #graphiql

#reactjs #graphql #gatsby #graphiql

Вопрос:

У меня есть проект Gatsby, созданный с помощью Gatsby-Ghost-Starter. Я пытаюсь получить доступ к данным сообщения в блоге из Ghost в файле шаблона Gatsby. Я успешно получаю доступ к некоторым данным, но у меня проблемы с доступом к вложенным данным GraphQL.

Используя интерфейс Graphiql, это данные, которые я пытаюсь получить:

 query MyQuery {
  allGhostPost {
    edges {
      node {
        id
        slug
        tags {
          id
          slug
          meta_title
          name
        }
      }
    }
  }
}

Вот как выглядит мой запрос в моем шаблоне Gatsby:

 export const pageQuery = graphql`
  query GhostPostQuery($limit: Int!, $skip: Int!) {
    allGhostPost(
        sort: { order: DESC, fields: [published_at] },
        limit: $limit,
        skip: $skip
    ) {
      edges {
        node {
          ...GhostPostFields
        }
      }
    }
  }
`

Вот мой компонент шаблона Gatsby:

 const Blog = ({ data, location, pageContext }) => {
    const posts = data.allGhostPost.edges
    const { pageNumber } = pageContext
    const { humanPageNumber } = pageContext
    const { numberOfPages } = pageContext

    // Dot notation here results in an error, how can I access the name property?
    const id = data.allGhostPost.edges.node.tags.name

    return (
        <React.Fragment>
            <MetaData location={location} />
            <Layout>
                <div className={styles.container}>
                    <section className={styles.postFeed}>
                        {posts.map(({ node }) => (
                            // The tag below includes the markup for each post - components/common/PostCard.js
                            <PostCard key={node.id} post={node} />
                        ))}
                    </section>
                    <Pagination pageContext={pageContext} />
                </div>
            </Layout>
        </React.Fragment>
    );
};

Как я могу получить доступ к данным, вложенным в объекты ребер / узлов? Мой запрос GraphQL неверен или есть проблема с тем, как я пытаюсь получить к нему доступ с помощью точечной нотации?

Например, как я могу получить name или meta_title ?

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

1. консоль. регистрируйте шаг за шагом …. вероятно, массивы в «цепочке»… Я думаю const id = data.allGhostPost.edges[0].node.tags[0].name ?

2. Это сделало свое дело. Изменение индекса массива ребер позволяет мне получать имена тегов, т.е. const id = data.allGhostPost.edges[1].node.tags[0].name, const id = data.allGhostPost.edges[2].node.tags[0].name и т.д… Спасибо.

3. … если вам это нужно вне «основного цикла»…. почему бы просто не перейти node.tags в <PostCard /> (например, использовать props.tags.map() для отображения тегов внутри)?

Ответ №1:

Я немного смущен тем, о чем вы спрашиваете. У вас есть цикл posts , в котором хранится вся информация. Просто получите к нему доступ с помощью:

 {posts.map(({ node }, index) => {
   console.log('tag name:', node.tags[index].name)
   return <PostCard key={node.id} post={node} />
})}

Просто доступ к вложенным свойствам в вашем posts .