missing attribute on result, Vue, Apollo and GraphQL

Question

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:

Deoxygenate

Answer 1

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 '
    }
}

Sigmoid

What if you return multplie entities in your query? – Wooer

Answer 2

You can also change variable name

  apollo: {
    clients: {
      query() {
        return gql`
          query clients {
            client: client {
              id
              name
              subDomain
              color
              logo
            }
          }
        `
      },
      update: data => data.client
    }
  }

Conciliar

This was the answer I needed. :) Thanks! – Ogawa

Answer 3

Im using vue3 with apollo... For whoever this might concern, my issue with this error was that name of smartQuery i passed was not same as in gql schema for example:

this.$apollo.addSmartQuery('listSomeItems', { <---
      query: ListItems,
      result: (data) => {
       ...
      },
    });

and schema was like

gql`
  query ListItems() {
---> listOnlyItems() {
     ...
    }
  }`

then name in addSmartQuery HAVE TO BE SAME as in schema!

so i had to change it to

 this.$apollo.addSmartQuery('listOnlyItems', { <---
 ...

Spaceband