使用Hasura中的subscription（weixin公众号【图说GIS】）

安装库

 npm install @apollo/client  graphql  graphql-ws

创建客户端

import { ApolloClient, HttpLink, InMemoryCache, split } from '@apollo/client';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { createClient } from 'graphql-ws';
export const graphqlUrl = 'http://x.x.x.x:x/v1/graphql'
export const wsGraphqlUrl = 'ws://x.x.x.x:x/v1/graphql'

const wsLink = new GraphQLWsLink(createClient({
    url: wsGraphqlUrl
}));

const httpLink = new HttpLink({
    uri: graphqlUrl
});

const splitLink = split(
    ({ query }) => {
        const definition = getMainDefinition(query);
        return (
            definition.kind === 'OperationDefinition' &&
            definition.operation === 'subscription'
        );
    },
    wsLink,
    httpLink,
);

export const client = new ApolloClient({
    link: splitLink,
    cache: new InMemoryCache()
});

使用

import { useSubscription } from "@apollo/client"
import { gql } from "@apollo/client"

const subscription = gql`
        subscription MySubscription {
        v_tag(where:{path:{_like:"1.%"}}) {name,oid,parentId}
        }
        `;
useSubscription(subscription , {
        onSubscriptionData: (datas) => {
            const { subscriptionData } = datas
            const data = subscriptionData.data
            const _datas = data.v_tag
            console.log(_datas )
        }
    })
或者
 function subscribe(datas) {
     const s= client.subscribe({
                query: subscription 
            }).subscribe(response => {
                const { data } = response;
               
            });
//取消  s.unsubscribe()
    }