如何在 TypeScript 中使用 GraphQL 进行数据交互-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种由 Facebook 开发的数据查询语言，它提供了一种更加高效、强大、灵活的数据交互方式，已经成为了现代 Web 应用中的重要组件。在本文中，我们将介绍如何在 TypeScript 中使用 GraphQL 进行数据交互。

安装依赖

首先，我们需要安装一些必要的依赖，包括 graphql、graphql-tag、apollo-client、apollo-cache-inmemory、apollo-link-http、@types/graphql、@types/apollo-client 等。可以使用以下命令进行安装：

npm install graphql graphql-tag apollo-client apollo-cache-inmemory apollo-link-http @types/graphql @types/apollo-client

创建 GraphQL 客户端

在 TypeScript 中，我们可以使用 Apollo Client 来处理 GraphQL 的数据交互。首先，我们需要创建一个 ApolloClient 实例：

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

const client = new ApolloClient({
  link: new HttpLink({
    uri: 'https://your-graphql-api-url',
  }),
  cache: new InMemoryCache(),
});

在这个例子中，我们使用 HttpLink 来连接到 GraphQL API 的 URL，并使用 InMemoryCache 来缓存数据。

创建查询

现在我们已经有了一个 ApolloClient 实例，接下来我们需要创建一个查询。在 GraphQL 中，查询是通过 GraphQL 语言来定义的。在 TypeScript 中，我们可以使用 graphql-tag 库来定义查询。

// javascriptcn.com code example
import gql from 'graphql-tag';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

在这个例子中，我们定义了一个名为 GetUsers 的查询，它会返回一个包含 id、name 和 email 属性的 users 数组。

发送查询

现在我们已经有了一个 ApolloClient 实例和一个查询，接下来我们需要发送查询并处理响应。在 ApolloClient 实例中，我们可以使用 query 方法来发送查询：

client.query({
  query: GET_USERS,
}).then(result => {
  console.log(result.data.users);
}).catch(error => {
  console.error(error);
});

在这个例子中，我们使用 GET_USERS 查询来获取用户列表，并在成功时打印用户列表，失败时打印错误信息。

使用变量

在 GraphQL 中，我们可以使用变量来传递参数，例如：

// javascriptcn.com code example
const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      id
      name
      email
    }
  }
`;

client.query({
  query: GET_USER,
  variables: {
    id: '123',
  },
}).then(result => {
  console.log(result.data.user);
}).catch(error => {
  console.error(error);
});

在这个例子中，我们定义了一个名为 GetUser 的查询，并使用 $id 变量来传递用户 ID。在发送查询时，我们可以通过 variables 属性来传递变量。

使用 TypeScript 类型

在 TypeScript 中，我们可以使用 @types/graphql 和 @types/apollo-client 库来为 GraphQL 类型和 Apollo Client 类型提供类型定义。例如：

// javascriptcn.com code example
import { ApolloQueryResult } from 'apollo-client';
import { GetUsersQuery, GetUserQuery } from './types';

client.query<GetUsersQuery>({
  query: GET_USERS,
}).then((result: ApolloQueryResult<GetUsersQuery>) => {
  console.log(result.data.users);
}).catch(error => {
  console.error(error);
});

client.query<GetUserQuery>({
  query: GET_USER,
  variables: {
    id: '123',
  },
}).then((result: ApolloQueryResult<GetUserQuery>) => {
  console.log(result.data.user);
}).catch(error => {
  console.error(error);
});

在这个例子中，我们使用 GetUsersQuery 和 GetUserQuery 类型来指定查询的返回类型。这样可以在编译时检查查询的返回值是否符合预期。

结论

在本文中，我们介绍了如何在 TypeScript 中使用 GraphQL 进行数据交互。我们首先安装了必要的依赖，然后创建了一个 ApolloClient 实例和一个查询，并使用 query 方法发送查询。我们还介绍了如何使用变量和 TypeScript 类型来更好地使用 GraphQL。希望这篇文章对你有帮助！

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