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

Question

我完全不熟悉在 Vue 应用程序中使用 Apollo 和 GraphQL 进行开发，现在已经被一个小问题困住了一段时间。

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

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

我目前正在执行此查询： 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 调用，它 returns 如下：

Answer 1

apollo中的键需要与返回对象中的键匹配。在您的情况下，请求返回的对象 client 而不是 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
    }
  }

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

missing attribute on result, Vue, Apollo and GraphQL

apollo

vue.js

graphql