结果、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 组件中:

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>

在网络选项卡中并检查 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屋！