vue пакетные запросы apollo complex oe - возможно?

Question

Кто-нибудь обнаружил, что не выполняет составные запросы с Vue Apollo (Apollo boost)?

Составной пакетный запрос

У меня есть массив if ids [ 12, 34, 56, 76, 76,…] и для каждого идентификатора мне нужно отправить запрос graphQL. Я мог бы получить 500 запросов, вызываемых один за другим.

Вместо этого я хочу объединить их (или отправить их все одновременно), используя псевдонимы. Что-то вроде

[
  first: User(id: "12") {
    name
    email
  },
  second: User(id: "34") {
    name
   email
  },
....
....
oneHundred: User(id: "34") {
    name
    email
  }
]

с выводом результатов в массив. Например,

this.users.pop(second)

Я много читал и искал. Я обнаружил, что это намекает на то, что это можно сделать

введите здесь описание ссылки

Есть какая-нибудь помощь?

Answer 1

Ответ состоит из 3 частей.

1. Распознает ли сервер пакетные запросы? Сервер Apollo по умолчанию
2. Настроить клиент в вашем приложении для обработки пакетов
3. Создавать запросы на лету.

Создание клиента Vue Apollo :

import VueApollo from 'vue-apollo'
import Vue from 'vue';
import { ApolloClient } from 'apollo-client'
import { ApolloLink, split } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { BatchHttpLink } from 'apollo-link-batch-http';
import { getMainDefinition } from 'apollo-utilities'

const httpLink = new HttpLink({ uri: HTTP_END_POINT });

const batchLink = new BatchHttpLink({ uri: HTTP_END_POINT });

const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  httpLink,
  batchLink,
)

const client = new ApolloClient({
  link: ApolloLink.from([link]),
  cache: new InMemoryCache(),
  connectToDevTools: true
})

Пример отправки пакета запросов внутри компонента Vue:

methods: {
    fetchUsers() {
        [<a list of user ids>].forEach(id => {
            this.$apollo.query({
              query: USER_QUERY,
              variables: { id },
            }).then(d => {
              console.table(d.data.User)
              this.users.push(d.data.User)
            }).catch(e => console.log(e));
      });
},
}

Фактический запрос выглядит так:

import gql from "graphql-tag";

export const USER_QUERY = gql`
  query User($id: String!) {
    User(id: $id) {
      firstName
      lastName
    }
  }