Запрос массива с неструктурированными объектами на GraphQL - PullRequest
Новая
       46

Запрос массива с неструктурированными объектами на GraphQL

0 голосов
/ 05 ноября 2019

Я пытаюсь использовать GraphQL для запроса неструктурированного массива с объектами в Gridsome. В настоящее время он выглядит очень грязно, и кажется, что должен быть лучший способ сделать это.

Данные, которые загружаются в GraphQL из CMS, выглядят так: 

{
    title: "Homepage",
    top_image: "imgurl.jpg",
    page_builder: [
             {
                 type: "slider",
                 field: "data example",
                 different_field: "data example"
             },
              {
                 type: "call_to_action",
                 field_for_cta: "data example",
                 different_cta_field: "data example"
             }
    ]
}

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

Когда я пытаюсь запросить это в GraphQL. Это станет очень грязно: 

<page-query>
query {
  data: pages(path: "/pages") {
    title,
    top_image,
    page_builder {
      type,
      field,
      different_field,
      type,
      field_for_cta,
      different_cta_field

      #this list will have way more fields depending on all the page builder elements

    }
    }
  }
</page-query>

Есть ли способ упорядочить эти поля по типу и вернуть только поля этого определенного типа?

1 Ответ

1 голос
/ 05 ноября 2019

Предполагая, что gridsome поддерживает фрагменты, вы можете сделать что-то вроде этого: 

<page-query>
query {
  data: pages(path: "/pages") {
    title,
    top_image,
    page_builder {
      ...A @include(if: $includeA)
      ...B @include(if: $includeB)
      ...C @include(if: $includeC)
    }
  }
}

# Note: Replace PageBuilderType with appropriate type
fragment A on PageBuilderType {
  # your fields here
}
fragment B on PageBuilderType {
  # your fields here
}
fragment C on PageBuilderType {
  # your fields here
}
</page-query>

Затем вы можете определить переменные при вызове createPage, как показано здесь : 

api.createPages(({ createPage }) => {
    createPage({
      path: '/my-page',
      component: './src/templates/MyPage.vue',
      queryVariables: {
        includeA: someCondition,
        includeB: someCondition,
        includeC: someCondition,
      },
    })
  })
}
...