npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

graphql-subscriptions-client

v0.16.4

Published

A simpler client for graphql subscriptions based on apollographql/subscriptions-transport-ws

Downloads

78,435

Readme

graphql-subscriptions-client

graphql-ws

This library works fine, but you may consider using graphql-ws. It's popular, well-maintained, works, and has zero dependencies.

What is this package

This is based directly on the client from subscriptions-transport-ws. As the name suggests, it's only for use as a client. It uses native websockets to communicate with a graphql server which is using 'graphql-ws' protocol. It plays nice with rollup, too.

Why this package

tldr; It works with rollup, and its lightweight

subscriptions-transport-ws works fine and it's better maintained so If you aren't having problems with it, you probably might want to use it instead. If you have tried to use that package with rollup however then you may have become frustrated and hopeless.

I found that the imports from the graphql module were causing problems and that I didn't have much need for them. This module ends up being therefore much smaller and simpler, but one difference is that queries must be strings and it only uses native WebSocket, so you may end up with problems if you aren't targeting modern browsers or if you like using graphql-tag's gql template string functions to define your queries.

Subscriptions without apollo-client

I couldn't find any roll-your-own solutions that worked on the client for subscriptions. Making websockets work isn't difficult, but if you want automatic reconnection and a few other obvious necessities then it gets more complicated. This package includes them and not much more. You can use subscriptions without apollo-client at all. You can use it for all your graphql queries if you want, but using fetch instead is probably a better idea.

Usage

If you have a apollo-server instance you can use this for subscriptions only, pass all requests over the websocket. The API is similar to what's described at subscriptions-transport-ws docs except that it doesn't support middleware and requires queries to be strings.

Also, this client supports batch messages as arrays from the server, and they will be processed as if they were received one after another, for example:

[{ id: "1", type: "data", ... }, { id: "1", type: "complete" }]
import { SubscriptionClient } from "graphql-subscriptions-client";

// get ready
const GRAPHQL_ENDPOINT = "ws://localhost:3000/graphql";

const query = `subscription onNewItem {
        newItemCreated {
            id
        }
    }`;

// set up the client, which can be reused
const client = new SubscriptionClient(GRAPHQL_ENDPOINT, {
  reconnect: true,
  lazy: true, // only connect when there is a query
  connectionCallback: (error) => {
    error && console.error(error);
  },
});

// make the actual request
client.request({ query });

// the above doesn't do much though

// call subscription.unsubscribe() later to clean up
const subscription = client
  .request({ query })
  // so lets actually do something with the response
  .subscribe({
    next({ data }) {
      if (data) {
        console.log("We got something!", data);
      }
    },
  });

Query must be a string.

Warning

Don't use this with apollo-client. You'd really be defeating the purpose. If you are using apollo-client then maybe stick to their way of doings, so use subscriptions-transport-ws instead.