Question

我正在尝试将apollo-link-rest与《星球大战》 API结合使用，但出现一些错误。

import { InMemoryCache } from "apollo-cache-inmemory";
import { ApolloClient } from "apollo-client";
import { RestLink } from "apollo-link-rest";
import gql from "graphql-tag";

// node environment?
const fetch = require("node-fetch");
global.fetch = fetch;
global.Headers = fetch.Headers;

const restLink = new RestLink({
  endpoints: { swapi: "https://swapi.co/api/" }
});

const client = new ApolloClient({
  link: restLink,
  cache: new InMemoryCache()
});

const query = gql`
  query people {
    search
      @rest(type: "Search", path: "people/?search=skywalker", endpoint: swapi) {
      count
      results {
        name
      }
    }
  }
`;

client
  .query({ query })
  .then(response => console.log(JSON.stringify(response)))
  .catch(err => console.log(err));

错误：

Missing field __typename in {
  "name": "Luke Skywalker"
}

Missing field __typename in {
  "name": "Anakin Skywalker"
}

Missing field __typename in {
  "name": "Shmi Skywalker"
}

我知道可以更改此InMemoryCache({ addTypename: false })设置以消除错误，但是我不知道如果将addTypename设置为false会对缓存产生什么影响。

有人可以为此指出正确的方向吗？

干杯！

Answer 1

查看文档对typename patching的看法。

您的@rest指令告诉客户search字段期望使用什么类型名，但是不对字段选择集中的任何类型进行任何说明。有两种解决方法。您可以使用@type指令：

query people {
  search @rest(type: "Search", path: "people/?search=skywalker", endpoint: swapi) {
    count
    results @type(name: "Person") {
      name
    }
  }
}

或配置typePatcher。像这样：

const restLink = new RestLink({
  uri: 'https://swapi.co/api/',
  typePatcher: {
    Search: (data, outerType, patchDeeper) => {
      if (data.results != null) {
        data.results = data.results.map(person => {
          return {__typename: "Person", ...person }
        });
      }
      return data
    },
  },
})

Answer 2

更通用的答案：

为避免 missing __typename 错误，请确保您的 GQL 模型中的任何数组对于数组中的每个对象都有对应的字段 __typename。

Apollo Client查询遗漏字段__typename

2 个答案: