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

Question

我完全不熟悉在 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 调用，它返回以下内容：

Answer 1

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

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

Answer 2

您还可以更改变量名称

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