vue apollo composite oe batch queries -- possible? - vue-apollo

Question

Has anyone found away of doing composite queries with Vue Apollo (Apollo boost)?
A composite batch query
I have an array if ids [ 12, 34, 56, 76, 76, …] and for each id I need to send a graphQL query. I could end up with a 500 queries being called one after the other.
Instead I want to batch them (or send them all at the same time) using aliases. Something like
[
first: User(id: "12") {
name
email
},
second: User(id: "34") {
name
email
},
....
....
oneHundred: User(id: "34") {
name
email
}
]
With the results being popped into an array. E.g.
this.users.pop(second)
I’ve done a fair bit of reading and searching. I found this that hints that it can be done
enter link description here
Any help out there?

Answer 1

The answer is in 3 parts.
Does the server recognise batch requests? Apollo server does by default
Set up the client in your app to handle batches
Create the queries on the fly.
Creating a Vue Apollo client:
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
})
Example of sending of a batch of queries inside a Vue component:
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));
});
},
}
The actual query looks like:
import gql from "graphql-tag";
export const USER_QUERY = gql`
query User($id: String!) {
User(id: $id) {
firstName
lastName
}
}