npm 包 graphcool-relay-subscriptions 使用教程

graphcool-relay-subscriptions 是一个基于 GraphCool 平台实现的用于 React Native 和 React 应用程序的 Relay subscriptions 的 npm 包。Relay subscriptions 是 React 应用程序中处理实时数据更新的一种方法。本文将详细介绍 graphcool-relay-subscriptions 如何使用，包括安装，配置和使用示例。

安装

graphcool-relay-subscriptions 可通过 npm 安装：

npm install graphcool-relay-subscriptions

配置

1. 在 App.js 文件中导入 graphcool-relay-subscriptions：

import { requestSubscription } from 'graphcool-relay-subscriptions';

1. 创建 subscription：

在创建 subscription 之前，需要先定义 subscription 的参数和返回值。如下是一个示例：

const subscription = graphql`
    subscription CounterSubscription($id: ID!) {
        Counter(id: $id) {
            id
            count
        }
    }
`;

该 Subscription 的参数为 id，类型为 ID，返回值 Counter 包含属性 id 和 count。

1. 发起 subscription：

可以通过以下代码在组件的 componentDidMount 中发起 subscription：

-- -------------------- ---- -------
------------------- -
    ----- - ------------ -------- - - -----------

    ----------------- - --------------------
        ------------
        -
            -------------
            ---------- - --- -------- -
        -
    -
-

其中， environment 是由 RelayEnvironmentProvider 提供的 Relay 环境， subscription 是我们在步骤 2 中定义的 subscription， variables 是传递给 subscription 的参数。

1. 处理更新：

我们可以通过以下代码在组件的 componentWillUnmount 中停止 subscription：

componentWillUnmount() {
    this.subscription.dispose()
}

subscription 的更新将通过 Next 回调函数返回：

-- -------------------- ---- -------
----- ------- ------- --------------- -
    ---
    -------- -
        ------ -
            -----------------------------
        -
    -
-
-- -- ------ --------
--------------------
    ---
    -
        ------- --------- -- -
            --------------- ------ --------------------- --
        -
    -
--

示例代码

以下是完整的示例代码：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ - ----------------------- ------- - ---- --------------
------ - ------------------- - ---- --------------------------------

----- ------- ------- --------------- -
    ------------------ -
        -------------
        ---------- - - ------ ------------------- --
    -

    ------------------- -
        ----- - ------------ ------- - - -----------

        ----- ------------ - --------
            ------------ ------------------------ ---- -
                ----------- ---- -
                    --
                    -----
                -
            -
        --

        ----------------- - --------------------
            ------------ -- ----- --
            -
                ------------- -- ------------
                ---------- - --- ---------- - -- ------------ --
            --
            -
                ------- --------- -- - -- -- ------------ --
                    --------------- ------ --------------------- --
                -
            -
        --
    -

    ---------------------- - -- -- ------------
        ---------------------------
    -

    -------- -
        ------ -
            ------
                -------------------------------
            -------
        -
    -
-

------ ------- -----------------------
    -------- -- --
    -
        -------- --------
            -------- --------------- -- ------- -
                --
                -----
            -
        -
    --
    --------
        ----- ------------------------ ---- -
            ----------- ---- -
                ------------------
            -
        -
    -
--

总结

本文介绍了 graphcool-relay-subscriptions 的安装，配置和使用示例，涵盖了 React Native 和 React 应用程序。希望这篇文章对你有所启发，也愿意听到反馈并改进。

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