在 TypeScript 中如何进行 GraphQL 的使用和调试？-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它让客户端能够精确地声明需要从后端获取的数据，从而减少了不必要的网络请求，提高了数据传输的效率。而 TypeScript 则是一种由 Microsoft 开发的静态类型检查器和编程语言，它使得 JavaScript 代码更加易于维护和调试。

在这篇文章中，我们将探讨如何在 TypeScript 中使用和调试 GraphQL，并分享一些最佳实践和技巧。

安装 GraphQL

要在 TypeScript 中使用 GraphQL，需要先安装相关的依赖包。可以使用 npm 或 yarn 来安装以下三个包：

npm install graphql graphql-tag apollo-boost
# 或者
yarn add graphql graphql-tag apollo-boost

其中，graphql 包提供了 GraphQL 的核心功能，graphql-tag 则是一个模板标签库，可以帮助我们在模板字面量中解析 GraphQL 查询语句，apollo-boost 则是一个 Apollo GraphQL 客户端的封装，提供了一组方便的默认配置。

客户端配置

在 TypeScript 中使用 GraphQL，需要配置一个 Apollo GraphQL 客户端。可以新建一个 apollo-client.ts 文件，并加入以下代码：

// www.javascriptcn.com code example
import ApolloClient from 'apollo-boost';

export const client = new ApolloClient({
  uri: 'https://api.github.com/graphql',
  request: (operation) => {
    operation.setContext({
      headers: {
        authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
      },
    });
  },
});

上面的代码创建了一个使用 GitHub GraphQL API 的 Apollo 客户端，并通过 setContext 方法添加了一个授权头部。为了避免把 GitHub 的个人访问令牌放在代码中，建议将其存储在环境变量中，并使用 dotenv 等工具从环境变量中读取。

编写查询

在 TypeScript 中使用 GraphQL 时，可以使用 gql 模板标签来声明 GraphQL 查询。我们可以在一个独立的 .graphql 文件中编写查询，然后在 TypeScript 中导入它。

在本文中，我们将以查询用户的仓库列表为例。可以编写一个 repositories.graphql 文件，它的内容如下：

// www.javascriptcn.com code example
query GetUserRepositories($username: String!) {
  user(login: $username) {
    repositories(first: 10) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

上面的查询中，我们定义了一个名为 GetUserRepositories 的查询，它可以带入一个 $username 的变量。这个查询将返回某个用户的前 10 个仓库列表，每个仓库包含 id 和 name 两个属性。

在 TypeScript 中使用查询

在 TypeScript 中使用查询，可以编写一个函数来调用 GraphQL 客户端，并传递查询和变量：

// www.javascriptcn.com code example
import { client } from './apollo-client';
import { gql } from 'graphql-tag';

export interface Repository {
  id: string;
  name: string;
}

interface GetUserRepositoriesResponse {
  user: {
    repositories: {
      edges: {
        node: Repository;
      }[];
    };
  };
}

async function getUserRepositories(username: string): Promise<Repository[]> {
  const { data } = await client.query<GetUserRepositoriesResponse>({
    query: gql`
      ${require('./queries/repositories.graphql')}
    `,
    variables: { username },
  });

  return data.user.repositories.edges.map((edge) => edge.node);
}

上面的代码中，我们定义了两个 TypeScript 接口，Repository 表示仓库对象，GetUserRepositoriesResponse 则表示 GraphQL 响应的数据结构。我们还编写了一个异步函数 getUserRepositories，它调用了 Apollo 客户端的 query 方法，并返回查询结果中的仓库列表。

需要注意的是，在 query 方法的参数中，我们使用了 gql 模板标签来声明查询，并使用 require 函数来导入 .graphql 文件中的查询。

调试 GraphQL

在 TypeScript 中调试 GraphQL，可以使用 Apollo 客户端提供的开发工具插件。可以安装 Chrome 插件：

https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm

然后在代码中开启开发工具插件：

// www.javascriptcn.com code example
import ApolloClient from 'apollo-boost';
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

export const client = new ApolloClient({
  link: ApolloLink.from([
    new HttpLink({
      uri: 'https://api.github.com/graphql',
      headers: {
        authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
      },
    }),
  ]),
  cache: new InMemoryCache(),
  connectToDevTools: true,
});

上面的代码中，我们通过 ApolloLink.from 方法来创建一个 Apollo 连接，它包含一个 HTTP 连接和一个缓存。我们还添加了一个参数 connectToDevTools 来启用客户端开发工具插件。

结语

本文介绍了在 TypeScript 中如何使用和调试 GraphQL，包括安装依赖、配置客户端、编写查询和调试技巧。希望这篇文章对大家有所帮助，让大家更好地掌握 TypeScript 和 GraphQL 的使用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d5d0e1a941bf7134b16788

在 TypeScript 中如何进行 GraphQL 的使用和调试？

安装 GraphQL

客户端配置

编写查询

在 TypeScript 中使用查询

调试 GraphQL

结语

接着读