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

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

0 голосов
/ 29 января 2019

Я использую 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.Я надеюсь, что мне не хватает чего-то простого, но я не могу понять, что не так.

1 Ответ

0 голосов
/ 29 января 2019

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

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 вы ожидали.

...