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