zoukankan      html  css  js  c++  java
  • hasura graphql subscriptions 使用

    subscriptions graphql 的一项实时数据推送的功能,还是很方便的,自己在直接使用subscriptions-transport-ws npm 包
    的时候运行一直有错误(主要是依赖的apollo版本),还好hasura graphql 默认提供了一个开发模版,还是比较方便的

    模版clone

    git clone https://github.com/hasura/nodejs-graphql-subscriptions-boilerplate.git

    基本代码集成

    • 使用模版(graphql server是自己的)
    const { execute } = require('apollo-link');
    const { WebSocketLink } = require('apollo-link-ws');
    const { SubscriptionClient } = require('subscriptions-transport-ws');
    const ws = require('ws');
    const getWsClient = function(wsurl) {
      const client = new SubscriptionClient(
        wsurl, {reconnect: true}, ws
      );
      return client;
    };
    
    // wsurl: GraphQL endpoint
    // query: GraphQL query (use gql`` from the 'graphql-tag' library)
    // variables: Query variables object
    const createSubscriptionObservable = (wsurl, query, variables) => {
      const link = new WebSocketLink(getWsClient(wsurl));
      return execute(link, {query: query, variables: variables});
    };
    const gql = require('graphql-tag');
    const SUBSCRIBE_QUERY = gql`
    subscription {
      apps {
        dr
        id
        appname
      }
    }
    `;
    function main() {
      const subscriptionClient = createSubscriptionObservable(
        'http://myserver:port/v1alpha1/graphql', // GraphQL endpoint
        SUBSCRIBE_QUERY, // Subscription query
      );
      var consumer = subscriptionClient.subscribe(eventData => {
        console.log("Received event: ");
        console.log(JSON.stringify(eventData, null, 2));
      }, (err) => {
        console.log('Err');
        console.log(err);
      });
    }
    main();
    • 效果

    说明

    主要是package.json

    • package.json
    {
      "name": "nodejs-graphql-subscriptions-boilerplate",
      "version": "1.0.0",
      "description": "",
      "main": "src/index.js",
      "scripts": {
        "start":"node index"
      },
      "author": "Karthik V",
      "license": "ISC",
      "dependencies": {
        "apollo-link": "^1.2.2",
        "apollo-link-ws": "^1.0.8",
        "graphql": "^0.13.2",
        "graphql-tag": "^2.9.2",
        "subscriptions-transport-ws": "^0.9.12",
        "ws": "^5.2.2"  // 这个比较重要,一般可能会忘记添加,会有提示websocket 没有实现,还好官方模版提供好了
      }
    }
    • 数据查询demo
    subscription:
    subscription appdemo($input:Int!) {
      apps (where:{
        id: {
          _eq:$input
        }}
      )
      {
        dr
        id
        appname
      }
    }
    查询参数:
    const subscriptionClient = createSubscriptionObservable(
        'http://server:port/v1alpha1/graphql', // GraphQL endpoint
        SUBSCRIBE_QUERY, // Subscription query
        {id:1}
      );

    参考资料

    https://github.com/hasura/nodejs-graphql-subscriptions-boilerplate
    https://www.apollographql.com/docs/react/advanced/subscriptions.html

  • 相关阅读:
    P1135 奇怪的电梯
    pycharm设置快捷键在keymap下拉列表没有eclipse怎么办
    记录selenium简单实现自动点击操作
    selenium 批量下载文件,json,重命名
    python3.6+selenium使用chrome浏览器自动将文件下载到指定路径
    selenium + Java 设置文件默认下载路径
    详解介绍Selenium常用API的使用Java语言(完整版)
    Pycharm安装robot framework运行插件
    Python之robotframework+pycharm测试框架!
    基于Python3 Robot framework环境搭建
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/9390246.html
Copyright © 2011-2022 走看看