结果，Vue，Apollo和GraphQL缺少属性 [英] missing attribute on result, Vue, Apollo and GraphQL

问题描述

我对与Apollo&Vue应用程序中的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.

目前，我正在执行以下查询:MyQuery.js

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
    }
}
`;

在我的Vue组件中:

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

在网络"标签中并检查API调用，它返回以下内容:

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

推荐答案

apollo 中的键需要与返回的对象中的键匹配.在您的情况下，请求返回的对象是 client 而不是 clients ，因此您需要将 apollo 中的密钥更改为 client :

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

这篇关于结果，Vue，Apollo和GraphQL缺少属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！