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中的键需要与返回的对象中的键匹配。在您的情况下，请求返回的对象是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缺少属性

2 个答案: