Search code examples
vue.jsgraphqlapollo

missing attribute on result, Vue, Apollo and GraphQL

Im totally new to developing with Apollo & GraphQL in Vue applications, and have been stuck on a small problem for some time now.

I keep getting the error: Missing clients attribute on result

I can see that the request returns data in the Network tab, so it seems to be something else than the query, when it's failing, but cant quite figure out what it is.

Currently im doing this query: MyQuery.js

import gql from 'graphql-tag';

export const allClientsQuery = gql`
query clients {
    client: client {
        id
        name,
        subDomain,
        color,
        logo
    }
}
`;

And in my Vue Component:

<template>
<div id="app">
<v-app>
  <template v-if="loading > 0">
    Loading
  </template>
  <template v-else>
    Output data: {{clients}}
  </template>
</v-app>


<script>
import {allClientsQuery} from './graphql/queries/Clients';
import {VApp} from 'vuetify/lib';

export default {
    data() {
        return {
            loading: 0,
            clients: []
        };
    },
    components: {
        VApp
    },
    apollo: {
        clients: {
            query: allClientsQuery,
            loadingKey: 'i am loading '
        }
    }
};
</script>

In the network tab and inspecting the API call, it returns the following:

enter image description here

Solution

  • The keys in apollo need to match the keys in the returned object. In your case, the request is returning object with client not clients, so you need to change the key in apollo to client:

    apollo: {
    client: {
        query: allClientsQuery,
        loadingKey: 'i am loading '
    }
}