在 Deno 应用中使用 GraphQL 的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

前言

GraphQL 是一种新兴的 API 查询语言，它的出现使得前端和后端的开发者能够更加高效地协作。Deno 是一个新的 JavaScript/TypeScript 运行时环境，它的出现也为前端开发者带来了新的机遇。本文将介绍在 Deno 应用中使用 GraphQL 的最佳实践，包括如何安装和配置 GraphQL，如何定义 GraphQL Schema，如何编写 GraphQL Resolver，以及如何在 Deno 应用中使用 GraphQL。

安装和配置 GraphQL

在 Deno 应用中使用 GraphQL 需要安装 deno-graphql 模块。可以通过以下命令进行安装：

deno install --unstable --allow-read --allow-net https://deno.land/x/graphql/mod.ts

安装完成后，需要在应用中引入 graphql 模块：

import { graphql, buildSchema } from "https://deno.land/x/graphql/mod.ts";

定义 GraphQL Schema

定义 GraphQL Schema 是使用 GraphQL 的第一步。Schema 是一个描述数据结构的对象，它定义了可以查询和修改的数据类型以及它们之间的关系。Schema 由类型定义和 Resolver 组成，类型定义用于描述数据结构，Resolver 用于定义数据的行为。

以下是一个简单的 GraphQL Schema 示例：

// javascriptcn.com 代码示例
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  getUser(id: ID!): User
}

type Mutation {
  createUser(name: String!, email: String!): User
}

在上面的 Schema 中，定义了一个 User 类型，它包含了 id、name 和 email 字段。Query 类型中定义了一个名为 getUser 的查询，它接收一个 id 参数，返回一个 User 类型。Mutation 类型中定义了一个名为 createUser 的变更，它接收 name 和 email 参数，返回一个 User 类型。

编写 GraphQL Resolver

Resolver 是一个用于处理查询和变更的函数，它根据查询和变更的参数返回相应的数据。Resolver 通常与一个 Schema 中的类型一一对应，每个类型都有一个 Resolver。

以下是一个简单的 Resolver 示例：

// javascriptcn.com 代码示例
const users = [
  {
    id: "1",
    name: "Alice",
    email: "alice@example.com",
  },
  {
    id: "2",
    name: "Bob",
    email: "bob@example.com",
  },
];

const resolvers = {
  Query: {
    getUser: (parent: any, { id }: any) => {
      return users.find((user) => user.id === id);
    },
  },
  Mutation: {
    createUser: (parent: any, { name, email }: any) => {
      const id = String(users.length + 1);
      const user = { id, name, email };
      users.push(user);
      return user;
    },
  },
};

在上面的 Resolver 中，定义了一个名为 users 的数组，其中包含了两个用户的信息。Query 类型中的 getUser Resolver 接收一个 id 参数，返回一个与该 id 相对应的用户信息。Mutation 类型中的 createUser Resolver 接收 name 和 email 参数，创建一个新的用户，并返回该用户信息。

在 Deno 应用中使用 GraphQL

在 Deno 应用中使用 GraphQL 需要创建一个 HTTP 服务器，并将 GraphQL Schema 和 Resolver 传递给 graphql 函数进行解析。

以下是一个简单的 Deno 应用示例：

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

const users = [
  {
    id: "1",
    name: "Alice",
    email: "alice@example.com",
  },
  {
    id: "2",
    name: "Bob",
    email: "bob@example.com",
  },
];

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    getUser(id: ID!): User
  }

  type Mutation {
    createUser(name: String!, email: String!): User
  }
`);

const resolvers = {
  Query: {
    getUser: (parent: any, { id }: any) => {
      return users.find((user) => user.id === id);
    },
  },
  Mutation: {
    createUser: (parent: any, { name, email }: any) => {
      const id = String(users.length + 1);
      const user = { id, name, email };
      users.push(user);
      return user;
    },
  },
};

const server = Deno.listen({ port: 8000 });
console.log("Server is running on http://localhost:8000");

for await (const conn of server) {
  const httpConn = Deno.serveHttp(conn);
  for await (const { respondWith } of httpConn) {
    const { pathname, search } = new URL(
      `http://${conn.remoteAddr.hostname}:${conn.remoteAddr.port}${
        conn.localAddr.hostname === "0.0.0.0" ? "" : `:${conn.localAddr.port}`
      }${conn.request.url}`,
    );
    if (pathname === "/graphql" && conn.request.method === "POST") {
      const { variables = {}, query } = await conn.request.body().value;
      const result = await graphql(schema, query, resolvers, null, variables);
      respondWith(
        new Response(JSON.stringify(result), {
          headers: { "content-type": "application/json" },
        }),
      );
    } else {
      respondWith(new Response("Not Found", { status: 404 }));
    }
  }
}

在上面的应用中，创建了一个 HTTP 服务器，并监听 8000 端口。当服务器接收到一个 POST 请求，并且路径为 /graphql 时，将请求的参数传递给 graphql 函数进行解析。解析结果将以 JSON 格式返回给客户端。

总结

本文介绍了在 Deno 应用中使用 GraphQL 的最佳实践，包括安装和配置 GraphQL，定义 GraphQL Schema，编写 GraphQL Resolver，以及在 Deno 应用中使用 GraphQL。使用 GraphQL 可以使得前端和后端的开发者更加高效地协作，提高开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65711ca1d2f5e1655d9c4ac5