GraphQL извлекает данные для определенных c блоков - Gatsby + Wordpress - PullRequest
Новая
       13

GraphQL извлекает данные для определенных c блоков - Gatsby + Wordpress

1 голос
/ 17 января 2020

У меня есть проект React + Gatsby JS, который извлекает данные с сайта Wordpress через их безголовый API. Я всего лишь новичок ie для Гэтсби.

Каждая страница на моем сайте состоит из блоков, которые в свою очередь состоят из полей. Я использую ACF для их создания.

В настоящее время я могу получить каждую страницу и список блоков на этой странице, используя следующий запрос GraphQL: 

 query ($id: String!) {
        currentPage: wordpressPage(id: {eq: $id}) {
            title
            acf {
                page_blocks {
                 block_type {
                     acf_fc_layout
                 }
                }
            }
        }
    }

Это возвращает следующие данные для страницы с идентификатором f4c4f4a7-ba0d-55b1-8877-16f543c22b80

{
  "data": {
    "wordpressPage": {
      "id": "f4c4f4a7-ba0d-55b1-8877-16f543c22b80",
      "acf": {
        "page_blocks": [
          {
            "block_type": [
              {
                "acf_fc_layout": "page_title_and_text"
              },
              {
                "acf_fc_layout": "two_column_media_and_text"
              }
            ]
          }
        ]
      }
    }
  }
}

Блоки находятся рядом с afc_fc_layout. И page_title_and_text, и two_column_media_and_text являются блоками страниц на этой странице.

Теперь я думаю, что следующим шагом будет создание компонента React для каждого из этих блоков с передачей данных настраиваемого поля для каждого компонента этому компоненту. Если на странице нет блока, мне не нужно было бы извлекать поля для этого блока, верно?

Первоначально я думал, что я выполню другой запрос из моего компонента React, запрашивая поля для этого конкретного блока. Но я понял, что на самом деле не могу добавить переменные (идентификатор страницы) в запрос stati c в моих компонентах, по документам Гэтсби , поэтому я не смогу запросить эту конкретную c страницу для своих полей. Пожалуйста, исправьте меня, если я ошибаюсь.

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

В идеале должен быть какой-то синтаксис, такой как 

...
acf {
    page_blocks {
        block_type {
            acf_fc_layout
            if (acf_fc_layout eq page_title_and_text) {
                title 
                text
            }

            if (acf_fc_layout eq two_column_media_and_text) {
                media
                text
            }
        }
    }
}
...

И тогда я передам эти поля соответствующему компоненту React.

Как правильно go по этому поводу?

Примечание. В настоящее время я в состоянии получить поля из API для визуализации блоков. Мне больше интересно, есть ли какой-нибудь способ, которым мой запрос GraphQL может отфильтровать данные для меня, или есть ли способ настроить конечную точку WP, чтобы показать мне данные поля, отфильтрованные по блокам, которые фактически находятся на странице.

Пример: сайт запрашивает данные в блоках 4,3,2,10,12,15 .... хотя на странице есть только блок 2.

Я беспокоюсь, что Разработчикам, которые хотят добавлять блоки в будущем, придется каждый раз переписывать запрос, что ухудшает масштабируемость и потенциальную производительность сайта.

1 Ответ

2 голосов
/ 17 января 2020

Вы говорите, что вы новичок в Гэтсби, но то, что вы пытаетесь сделать, затрагивает многие сложные темы внутри Гэтсби. Мой ответ, скорее всего, неполон, и вам нужно будет самому многое понять.

Подготовьтесь к большому чтению документации и отладке, чтобы заставить работать с Гэтсби.

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

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

Как правильно go по этому поводу?

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

acf: acf_fc_layout eq page_title_and_text -> React component PageTitleAndText.jsx

const PageTitleAndText = ({ title, text}) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{text}</p>
    </div>
  );
};

// NO GraphQL query

export default PageTitleAndText;

Вместо этого вы передаете реквизиты в шаблоне страницы своему компоненту:

acfPageTemplate.jsx

const acfPageTemplate = (props) => {

  return (
    <div>
      {/* pass props as data from the GraphQL query result here */}
        <PageTitleAndText title={props.data.currentPage.acf.page_blocks.block_type.acf_fc_layout.title  } 
                          text ={props.data.currentPage.acf.page_blocks.block_type.acf_fc_layout.text} />

    </div>
  );
};
export const query = graphql`
 query ($id: String!) {
        currentPage: wordpressPage(id: {eq: $id}) {
            title
            acf {
                page_blocks {
                 block_type {
                     acf_fc_layout
                 }
                }
            }
        }
    }
`;

export default acfPageTemplate;

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

Вам необходимо передать переменные в свой запрос страницы. Единственный способ сделать это - использовать контекст страницы, как описано в этом вопросе :

gatsby-node.js

createPage({
  path: `/my-acf-page-title-and-text-page/`,
  component: path.resolve(`./src/templates/PageTitleAndText.jsx`),
  // The context is passed as props to the component as well
  // as into the component's GraphQL query.
  context: {
   id: acfFieldId, // pass the acf field id
 },
})

// define a createPage action for each of your acf layouts

Но я понял На самом деле я не могу добавить переменные (идентификатор страницы) в запрос stati c внутри моих компонентов, согласно документам Gatsby, поэтому я не смог бы запросить указанную страницу c для ее полей. Пожалуйста, поправьте меня, если я ошибаюсь.

Верно. Вот почему вам нужно go указать путь к странице, шаблон страницы и переменную контекста страницы в gatsby-node.js

Если страница не имеет блока, то не будет мне нужно найти поля для этого блока, верно?

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

Мой совет - заставить его работать с одним указанным макетом c, прежде чем вы go спуститесь по следующей кроличьей норе, если вы решите это сделать. это вообще.

...