结果、Vue、Apollo 和 GraphQL 缺少属性答案

【问题标题】：missing attribute on result, Vue, Apollo and GraphQL结果、Vue、Apollo 和 GraphQL 缺少属性
【发布时间】：2019-12-19 10:29:26
【问题描述】：

我对在 Vue 应用程序中使用 Apollo 和 GraphQL 进行开发是完全陌生的，并且已经被一个小问题困扰了一段时间。

我不断收到错误：结果中缺少客户属性

我可以看到请求在“网络”选项卡中返回数据，所以它似乎不是查询，当它失败时，但不能完全弄清楚它是什么。

目前我正在做这个查询： 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 调用，它返回以下内容：

【问题讨论】：

标签： vue.js graphql apollo

【解决方案1】：

你也可以改变变量名

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

【讨论】：

这是我需要的答案。 :) 谢谢！

【解决方案2】：

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

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

【讨论】：

如果您在查询中返回多个实体怎么办？