Не удается получить доступ к данным объекта в запросе страницы Гэтсби

Question

Я использую Prismic и Gatsby для сайта и у меня проблемы с шаблоном страницы. Запрос graphql работает, но я не могу получить доступ к элементам в объекте данных.

Вот как настроен мой шаблон:

const ContactPage = ({ data: prismicContactPage }) => {
  const { data } = prismicContactPage;
  console.log(prismicContactPage); // logs the object and all its data
  console.log(data); // undefined

  return (
    <Layout>
      <SEO key="contact-seo" title="" />
      <PageBody>
          {data.title.text} // data is undefined
          {prismicContactPage.data.title.text} // prismicContactPage.data is undefined
      </PageBody>
    </Layout>
  );
};

export default ContactPage;

export const pageQuery = graphql`
  query ContactQuery {
    prismicContactPage {
      data {
        title {
          text
        }
      }
    }
  }
`;

Я могу зарегистрировать объект запроса, и вся правильная информация присутствует, но по какой-то причине я не могу получить данные внутри объекта.

Если я изменю компонент на:

const ContactPage = ({ data: {prismicContactPage: data} }) => {
  console.log(data); // logs correct info

  return (
    <Layout>
      <SEO key="contact-seo" title="" />
      <PageBody>
          {data.title.text} // undefined
      </PageBody>
    </Layout>
  );
};

Я могу получить "дальше" в объект, но с помощью data.title.text заканчивается TypeError: data.title is undefined

Удаление кеша и перестроение запросов, похоже, не помогают, и с моим запросом graphql не возникает проблем, когда я использую проводник graphql. Я надеюсь, что мне не хватает чего-то базового, но я не могу на всю жизнь понять, что не так.

Answer 1

С этим запросом

export const pageQuery = graphql`
  query ContactQuery {
    prismicContactPage {
      data {
        title {
          text
        }
      }
    }
  }
`;

Я ожидаю, что данные будут переданы в мой компонент следующим образом:

props.data.prismicContactPage.data.title.text

Так, возможно, вы хотели извлечь данные, как это?

// extract props.data.prismicContactPage
const ContactPage = ({ data: { prismicContactPage } }) => {
  console.log(prismicContactPage.data.title.text)
  return ...
}

или же

// extract props.data.prismicContactPage.data
const ContactPage = ({ data: { prismicContactPage: { data } } }) => {
  console.log(data.title.text)
  return ...
}

---

Когда ты пишешь ({ data: prismicContactPage }) => ..., это эквивалентно

const prismicContactPage = this.props.data`;
const { data } = prismicContactPage; // undefined because there's no this.props.data.data

А также ({ data: {prismicContactPage: data} }) => ... эквивалентно

const data = this.props.data.prismicContactPage;
console.log(data.title.text) // undefined because there's no this.props.data.prismicContactPage.title.text

Я думаю, что оба не data ты ожидал