CODEWITHSUNDEEP
vue.jsgraphqlapollo
user431619
user431619

Reputation:

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

Upvotes: 8

Views: 10969

Answers (3)

Adam Brejč&#225;k
Adam Brejč&#225;k

Reputation: 1

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', { <---
 ...

Upvotes: 0

PayteR
PayteR

Reputation: 1757

You can also change variable name

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

Upvotes: 12

akuiper
akuiper

Reputation: 214927

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

Upvotes: 14

Related Questions