Deno 中如何使用 GraphQL 实现数据查询与处理-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言，它让客户端能够精确地获得需要的数据。在前端开发中，我们常常使用 GraphQL 来处理数据的查询和处理。而在 Deno 中使用 GraphQL 则需要我们安装相应的库和了解一些基础知识。

安装依赖

在 Deno 中使用 GraphQL 需要安装以下两个依赖库：

graphql：处理 GraphQL 请求、响应和验证数据类型。
oak-graphql：用于在 Oak 中使用 GraphQL。

// javascriptcn.com 代码示例
import { Application } from "https://deno.land/x/oak/mod.ts";
import { applyGraphQL } from "https://deno.land/x/oak_graphql/mod.ts";
import { GraphQLService } from "./graphql.ts"

const app = new Application();

const gqlService = new GraphQLService();

const GraphQLServiceTypeDefs = gqlService.definition();

app.use(async (ctx) => {
  await applyGraphQL({
    path: "/graphql",
    resolvers: gqlService.resolverMap(),
    typeDefs: GraphQLServiceTypeDefs,
  })(ctx);
});

console.log("Server start at http://localhost:8080");
await app.listen({ port: 8080 });

创建 GraphQL 服务

我们需要在 Deno 中创建一个 GraphQL 服务，才能通过浏览器或其他客户端使用 GraphQL 进行数据查询和处理。这里我们可以使用 oak-graphql 中提供的 applyGraphQL 方法。

// javascriptcn.com 代码示例
import {
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString,
  GraphQLNonNull,
} from "graphql";

export class GraphQLService {
  constructor() {
    this.schema = this.createSchema();
  }

  createSchema() {
    return new GraphQLSchema({
      query: new GraphQLObjectType({
        name: "Query",
        fields: () => ({
          greeting: {
            type: GraphQLString,
            args: {
              name: { type: new GraphQLNonNull(GraphQLString) },
            },
            resolve: (_, args) => `Hello, ${args.name}!`,
          },
        }),
      }),
    });
  }

  definition() {
    return `
      type Query {
        greeting(name: String!): String!
      }
    `
  }

  resolverMap() {
    return {
      Query: {
        greeting: (_, args) => `Hello, ${args.name}!`,
      },
    }
  }
}

上述示例中，我们创建了一个 GraphQLService 类和一个 createSchema 方法，用于创建 GraphQL 服务的 schema。我们通过 GraphQLSchema 构造函数来创建一个新的 schema，其中 query 对象中包含了所有可用的查询。

客户端查询

在客户端中，使用 GraphQL 进行数据查询和处理需要遵循以下步骤：

创建一个 GraphQL 客户端实例。
使用 query 方法向 graphql 服务获取数据。

// javascriptcn.com 代码示例
import { gql } from "https://deno.land/x/oak_graphql/mod.ts";
import { print } from "graphql";

const client = new Client({ endpoint: "http://localhost:8080/graphql" });

const query = gql`
  query Greeting($name: String!) {
    greeting(name: $name)
  }
`;

const response = await client.query({
  query: print(query),
  variables: { name: "Deno" },
});

console.log(response.data.greeting);

上述示例中，我们创建了一个 GraphQL 客户端实例，并使用 query 方法向服务端获取数据。通过 gql 方法和模板字符串方式，我们可以定义查询字符串。其中 Greeting 是操作名称，$name 是查询参数，greeting 是查询字段。客户端的执行结果最终会输出 Hello, Deno!。

总结

在 Deno 中使用 GraphQL 实现数据查询和处理可以帮助我们更加高效、规范地开发前端应用程序。通过本文的介绍，我们可以了解到如何在 Deno 中使用 GraphQL，包括安装依赖、创建服务和客户端查询。希望读者可以掌握 GraphQL 在 Deno 中的应用，提升前端开发的水平。

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