在JavaScript中實現GraphQL訂閱以進行即時資料更新

---

在當今快節奏的世界中，即時資料更新對於現代 Web 應用程式變得越來越重要。實現即時功能的一種流行解決方案是 GraphQL 訂閱。在本文中，我們將探討如何在 JavaScript 中實現 GraphQL 訂閱，提供程式碼示例、解釋以及對該主題的全面理解。

瞭解 GraphQL 訂閱

GraphQL 是一種用於 API 的開源查詢語言，以及一個用於使用現有資料執行這些查詢的執行時環境。它允許客戶端向伺服器請求特定資料，從而實現客戶端和伺服器之間高效且靈活的通訊。雖然 GraphQL 查詢和突變用於檢索和操作資料，但 GraphQL 訂閱透過在客戶端和伺服器之間建立持久連線來實現即時資料更新。

設定環境

首先，我們需要一個 JavaScript 環境和一個 GraphQL 伺服器。出於本文的目的，我們將使用 Node.js 和 Apollo Server 庫，它是用 JavaScript 構建 GraphQL 伺服器的流行選擇。在繼續之前，請確保已安裝 Node.js。

安裝依賴項

讓我們建立一個新專案並安裝必要的依賴項 -

mkdir graphql-subscriptions
cd graphql-subscriptions
npm init -y
npm install apollo-server graphql

說明

在此步驟中，我們設定專案目錄並使用 npm 初始化一個新專案。然後，我們安裝所需的依賴項，包括 Apollo Server 和 GraphQL 庫。

定義模式

接下來，讓我們建立一個名為 schema.js 的檔案並定義一個簡單的 GraphQL 模式 -

// schema.js

const { gql } = require('apollo-server');

const typeDefs = gql`
   type Post {
      id: ID!
      title: String!
      content: String!
   }

   type Query {
      posts: [Post!]!
   }

   type Mutation {
      createPost(title: String!, content: String!): Post!
   }

   type Subscription {
      newPost: Post!
   }
`;

module.exports = typeDefs;

說明

在此程式碼片段中，我們從 Apollo Server 匯入必要的依賴項，並使用 gql 標記定義我們的 GraphQL 模式。我們定義了一個 Post 型別，其中包含 id、title 和 content 欄位。此外，我們定義了一個 Query 型別用於檢索帖子，一個 Mutation 型別用於建立帖子，以及一個 Subscription 型別用於接收新帖子的即時更新。

實現 GraphQL 訂閱

有了模式，現在讓我們為 Query、Mutation 和 Subscription 型別實現解析器函式。

在此示例中，我們將使用記憶體陣列來儲存帖子。

建立解析器

在名為 resolvers.js 的新檔案中，新增以下程式碼 -

// resolvers.js

const posts = [];

const resolvers = {
   Query: {
      posts: () => posts,
   },
   Mutation: {
      createPost: (_, { title, content }) => {
         const newPost = { id: posts.length + 1, title, content };
         posts.push(newPost);
         return newPost;
      },
   },
   Subscription: {
      newPost: {
         subscribe: (_, __, { pubsub }) => pubsub.asyncIterator('NEW_POST'),
      },
   },
};

module.exports = resolvers;

說明

在此程式碼片段中，我們為不同的 GraphQL 型別定義解析器函式。posts 欄位的 Query 解析器返回 posts 陣列。createPost 的 Mutation 解析器將新帖子新增到 posts 陣列並返回新建立的帖子。最後，newPost 的 Subscription 解析器設定訂閱並使用 pubsub 物件非同步監聽新帖子。

配置伺服器

現在，讓我們在一個名為 server.js 的新檔案中配置 Apollo Server -

// server.js

const { ApolloServer, PubSub } = require('apollo-server');
const typeDefs = require('./schema');
const resolvers = require('./resolvers');

const pubsub = new PubSub();

const server = new ApolloServer({
   typeDefs,
   resolvers,
   context: () => ({ pubsub }),
});

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

說明

在此程式碼片段中，我們從 Apollo Server 以及我們之前建立的 schema 和 resolver 檔案匯入必要的依賴項。我們從 Apollo Server 例項化一個 PubSub 物件來處理訂閱所需的釋出-訂閱功能。然後，我們使用 schema、resolvers 和包含 pubsub 物件的上下文配置 Apollo Server。最後，我們啟動伺服器並記錄其執行的 URL。

測試 GraphQL 訂閱

訂閱新帖子 -

伺服器執行後，開啟一個新終端並使用 GraphQL 客戶端（如 GraphiQL 或 Apollo Client）執行以下訂閱查詢

subscription {
   newPost {
      id
      title
      content
   }
}

說明

此訂閱查詢設定一個訂閱以監聽新帖子。它請求新帖子的 id、title 和 content 欄位。

釋出新帖子

現在，在另一個終端中，執行以下突變以釋出新帖子 -

示例

mutation {
   createPost(title: "Hello, World!", content: "This is my first post.")
   {
      id
      title
      content
   }
}

說明

此突變建立一個新的帖子，標題為“Hello, World！”，內容為“This is my first post.”。該突變返回新建立帖子的 id、title 和 content 欄位。

輸出

執行突變後，您應該會看到新建立的帖子被髮送到訂閱選項卡。訂閱選項卡中的輸出將如下所示 -

{
   "data": {
      "newPost": {
         "id": "1",
         "title": "Hello, World!",
         "content": "This is my first post."
      }
   }
}

結論

在本文中，我們探討了如何在 JavaScript 中實現 GraphQL 訂閱。我們討論了即時資料更新的重要性，使用 Apollo Server 設定了 GraphQL 伺服器，並演示瞭如何定義模式、解析器和訂閱。透過遵循提供的步驟，您可以將 GraphQL 訂閱整合到您的 JavaScript 應用程式中，併為改進的使用者體驗啟用即時功能。