Typescript 使用axios处理来自GraphQL API的响应

我可以成功地提出我想要的post请求，如下所示：

async function fn(): Promise<MediaListCollection> {
  let result = {} as MediaListCollection;

  await axios
    .post<MediaListCollection>(
      "https://graphql.anilist.co/",
      {
        query: USER_LIST_CURRENT,
        variables: {
          userId: 831347,
          status: MediaListStatus.Current,
          type: MediaType.Anime,
        },
      },
      {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }
    )
    .then((response) => (result = response.data))
    .catch((err) => {
      throw {
        error: err,
      };
    });

  return result;
}

fn()
  .then((data) => console.log(JSON.stringify(data)))
  .catch((err) => console.log(JSON.stringify(err)));

因此我尝试访问条目列表0：

fn()
  .then((data) => console.log(JSON.stringify(data.lists![0])))
  .catch((err) => console.log(JSON.stringify(err)));

我明白了

我看到回应有一个更大的对象，“数据”，有没有办法克服这个问题？我不认为我需要检查每种类型并添加它，或者我需要吗？

正如xadm所说

默认情况下，graphql返回以数据（…）包装的数据

我们可以采用的最接近于将其保持为硬类型的方法是：

async function fetch<T>(query: string, variables: Object): Promise<T> {
  return await axios
    .post(
      "https://graphql.anilist.co/",
      {
        query,
        variables,
      },
      {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }
    )
    .then((response) => response.data.data)
    .catch((err) => {
      throw {
        error: err,
      };
    });
}

异步函数获取（查询：字符串，变量：对象）：承诺{ 返回等待axios .邮政( "https://graphql.anilist.co/", { 查询 变量， }, { 标题：{ “内容类型”：“应用程序/json”， 接受：“应用程序/json”， }, } ) .然后（（响应）=>response.data.data） .catch（（错误）=>{ 扔{ 错误：呃， }; }); } 正在调用获取：

fetch<MediaListCollection>(USER_LIST_CURRENT, {
  userId: 831347,
  status: MediaListStatus.Current,
  type: MediaType.Anime,
})
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

fetch（当前用户列表）{
用户ID:831347，
状态：MediaListStatus.Current，
类型：媒体类型。动画，
})
.然后（（数据）=>console.log（数据））
.catch（（err）=>console.log（err））；

data。。媒体列出[0]，它不是我定义的键入问题的属性。。。默认情况下，graphql返回以

数据

包装的数据，因为response.data可以包含

错误

（不可缓存的网络错误）和查询/更改名称级别。。。您可以通过

删除它们以返回数组。然后（（response）=>（result=response.data.data.MediaListCollection））

是的，我想可能有一些解决方法，我得到了一个，但不是我想要的方法，如果你把你的

fn

结果输入为

Promise

，那么你不能只返回整个graphql响应

async function fetch<T>(query: string, variables: Object): Promise<T> {
  return await axios
    .post(
      "https://graphql.anilist.co/",
      {
        query,
        variables,
      },
      {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
      }
    )
    .then((response) => response.data.data)
    .catch((err) => {
      throw {
        error: err,
      };
    });
}

fetch<MediaListCollection>(USER_LIST_CURRENT, {
  userId: 831347,
  status: MediaListStatus.Current,
  type: MediaType.Anime,
})
  .then((data) => console.log(data))
  .catch((err) => console.log(err));