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-friendly

v0.0.9

Published

An easy and friendly graphql client, alternative to apollo-client

Downloads

10

Readme

graphql-friendly

graphql-friendly is an easy and friendly alternative to apollo-client.

Motivations

I have never found another graph client that apollo-client. Graphql queries can be performed with standard http client (like axios) but these client does not support graphql subscriptions. apollo-client was the only one however it is not quiet simple as i would like.

Morever, apollo-client has been originally made for react and I love vue. There is a good plugin for vue. I remember that configure apollo for Nuxt.js was such a pain and I had a lot of issue about the cache. I searched all Github to find a solution and i lost a lot of time. Now i have others projects with vue and graphql and I need a more simple tool for that.

Features

  • :zap: Send query and mutation request to your favorite graphql API
  • :tada: Supports subscription request
  • :rainbow: Supports variables with your queries
  • :octopus: Accept graphql query as string or as object (parsed with graphl-tag)
  • :cyclone: Vue 3 plugin

Get started

npm install graphql-friendly

Node.js && Browser

To declare your client, your just need the following line

import { GraphqlClient } from 'graphql-friendly';

const myGraphqlClient = new GraphqlClient('http://localhost:10000/v1/graphql');

Then, you just have to call the method you want :

query

import gql from 'graphql-tag';

const createUser = gql`
  mutation createUser($email: String!) {
    insert_users(objects: {
      email: $email,
      nickname: "fefe",
      password: "zefe"
    }) {
      returning {
        id
      }
    }
  }
`;

const answer = await myGraphqlClient.query({
  query: CreateUser,
  variables: { email: '[email protected]' },
});

console.log(answer) // { insert_users: { ... }}

mutation

For the moment, .mutation is exactly the same as .query.

subscription

Graphql allows you to make subscription. To do this, you juste have to call the subscribe method and subscribe the answer

const myObserver = myGraphqlClient.subscribe({ query: 'subscription { users { id } }' })

for await (const event of myObserver) {
  console.log(event);

  break; // If you want to cut the subscription
}

With Vue 3

import { createApp } from 'vue';
import GraphqlFriendly from 'graphql-friendly';

const app = createApp(App);

app.use(GraphqlFriendly, {
  url: 'http://localhost:10000/v1/graphql',
});

After installing the plugin, the client is accessible in your components as this.$graphqlClient.

Documentation

query({ query, variables })

  • query: string | object - The query can be a graphql string or parsed query with graphql-tag.
  • variables: object - Variables provided to your query

returns the graphql answer

mutation({ query, variables })

  • query: string | object - The query can be a graphql string or parsed query with graphql-tag.
  • variables: object - Variables provided to your query

returns the graphql answer

subscribe({ query, variables })

  • query: string | object - The query can be a graphql string or parsed query with graphql-tag.
  • variables: object - Variables provided to your query