Apollo Server构建GraphQL服务端和客户端的实践之旅

2024-02-23 08:00:48

在当今快速发展的互联网时代，API已成为应用程序和服务之间进行通信的标准方式。然而，随着应用程序变得越来越复杂，API也变得越来越难以管理和使用。为了解决这一问题，GraphQL应运而生。

GraphQL是一种查询语言，它允许客户端以声明性方式请求数据。这意味着客户端可以精确地指定他们需要的数据，而无需关心数据的底层结构或如何检索它。这使得GraphQL成为一种非常灵活和强大的工具，因为它允许客户端轻松地构建复杂的查询，而无需担心API的实现细节。

Apollo Server是一个功能强大的GraphQL服务器端框架，它可以帮助您快速轻松地构建GraphQL API。它支持多种编程语言，包括Node.js、Python和Java，并提供了一系列强大的功能，包括：

模式定义语言 (SDL) ：SDL是一种声明性语言，用于定义GraphQL模式。它允许您指定GraphQL API中可用的数据类型、查询和突变。
解析器 (Resolver) ：解析器是用于从数据源检索数据的函数。它们可以是同步的或异步的，并且可以处理各种数据源，包括关系数据库、NoSQL数据库和REST API。
中间件 (Middleware) ：中间件是可以在请求处理过程中执行代码的函数。它们可以用于验证请求、添加标头或记录请求。

Apollo Client是一个GraphQL客户端库，它可以帮助您在客户端应用程序中轻松使用GraphQL API。它支持多种编程语言，包括JavaScript、TypeScript和Python，并提供了一系列强大的功能，包括：

查询 (Queries) ：查询是用于从GraphQL API检索数据的操作。它们可以是简单的查询，也可以是复杂的查询，涉及多个数据类型和关系。
突变 (Mutations) ：突变是用于向GraphQL API写入数据的操作。它们可以是简单的突变，也可以是复杂的突变，涉及多个数据类型和关系。
订阅 (Subscriptions) ：订阅是用于监听GraphQL API中数据的更改的操作。当数据发生更改时，订阅者将收到通知，并可以相应地更新其UI。

在本文中，我们将使用Apollo Server和Apollo Client在Node.js和React中构建一个简单的GraphQL服务端和客户端。我们将创建一个简单的To-Do应用程序，允许用户创建、读取、更新和删除任务。

先决条件

在开始之前，您需要确保您的系统中已安装以下软件：

Node.js 16或更高版本
npm 6或更高版本
React 17或更高版本
yarn 1或更高版本

创建Node.js项目

首先，我们需要创建一个新的Node.js项目。为此，请打开终端并运行以下命令：

npx create-react-app apollo-server-todo

这将创建一个新的React项目名为“apollo-server-todo”。

安装依赖项

接下来，我们需要安装Apollo Server和Apollo Client依赖项。为此，请在项目目录中运行以下命令：

yarn add apollo-server apollo-server-express apollo-client apollo-cache-inmemory

这将安装所有必要的依赖项。

创建GraphQL模式

现在，我们需要创建一个GraphQL模式。为此，请在项目目录中创建一个名为“schema.graphql”的文件。然后，在该文件中添加以下代码：

type Query {
  todos: [Todo!]!
}

type Todo {
  id: ID!
  text: String!
  completed: Boolean!
}

type Mutation {
  createTodo(text: String!): Todo!
  updateTodo(id: ID!, text: String, completed: Boolean): Todo!
  deleteTodo(id: ID!): Todo!
}

这将定义我们的GraphQL模式。模式包含三个类型：Query、Todo和Mutation。Query类型定义了我们可以从GraphQL API中查询的数据。Todo类型定义了待办事项的数据结构。Mutation类型定义了我们可以对GraphQL API执行的突变。

创建GraphQL服务器

现在，我们需要创建一个GraphQL服务器。为此，请在项目目录中创建一个名为“server.js”的文件。然后，在该文件中添加以下代码：

const { ApolloServer, gql } = require('apollo-server');
const { v4: uuidv4 } = require('uuid');

const typeDefs = gql`
  type Query {
    todos: [Todo!]!
  }

  type Todo {
    id: ID!
    text: String!
    completed: Boolean!
  }

  type Mutation {
    createTodo(text: String!): Todo!
    updateTodo(id: ID!, text: String, completed: Boolean): Todo!
    deleteTodo(id: ID!): Todo!
  }
`;

const resolvers = {
  Query: {
    todos: () => todos,
  },
  Mutation: {
    createTodo: (parent, { text }) => {
      const newTodo = {
        id: uuidv4(),
        text,
        completed: false,
      };

      todos.push(newTodo);

      return newTodo;
    },
    updateTodo: (parent, { id, text, completed }) => {
      const todo = todos.find(todo => todo.id === id);

      if (!todo) {
        throw new Error('Todo not found');
      }

      todo.text = text ?? todo.text;
      todo.completed = completed ?? todo.completed;

      return todo;
    },
    deleteTodo: (parent, { id }) => {
      const todo = todos.find(todo => todo.id === id);

      if (!todo) {
        throw new Error('Todo not found');
      }

      todos = todos.filter(todo => todo.id !== id);

      return todo;
    },
  },
};

const todos = [
  {
    id: uuidv4(),
    text: 'Learn GraphQL',
    completed: false,
  },
  {
    id: uuidv4(),
    text: 'Build a GraphQL API',
    completed: true,
  },
];

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

这将创建一个GraphQL服务器。服务器使用Apollo Server框架，并使用我们之前定义的模式和解析器。

创建GraphQL客户端

现在，我们需要创建一个GraphQL客户端。为此，请在项目目录中创建一个名为“client.js”的文件。然后，在该文件中添加以下代码：

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000',
  cache: new InMemoryCache(),
});

export default client;

这将创建一个GraphQL客户端。客户端使用Apollo Client框架，并连接到我们在本地运行的GraphQL服务器。

使用GraphQL客户端查询数据

现在，我们可以使用GraphQL客户端从GraphQL服务器查询数据。为此，请在项目目录中创建一个名为“App.js”的文件。然后，在该文件中添加以下代码：

import React, { useState, useEffect } from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_TODOS = gql`
  query GetTodos {
    todos {
      id
      text
      completed
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_TODOS);

  const [todos, setTodos] = useState([]);

  useEffect(() => {
    if (data) {
      setTodos(data.todos);
    }
  }, [data]);

  return (
    <div>
      <h1>To-Do List</h1>
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </div>
  );
}

export default App;