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

simple-gql

v0.2.0

Published

Lightweight GraphQL request utiltiy.

Downloads

84

Readme

Simple-Gql

Lightweight GraphQL request/client aimed at usage in the browser. Can also be used in Node by providing your own implementation of fetch.

Built to be used for minimal use cases or with any Promise based data-fetching abstraction such as react-query.

Features

  • Light and treeshakeable. No dependencies.
  • Written in TypeScript.
  • Functional API.
  • Supports plain string queries or ASTNodes from graphql-tag.

Installation

# npm
npm install simple-gql

# yarn
yarn add simple-gql

Usage

Plain request with JavaScript

import { gqlFetch } from 'simple-gql'

const query = `
  query getBook($title: String!) {
    Book(title: $title) {
      publishDate
      author {
        name
      }
    }
  }
`

const response = await gqlFetch({
  url: 'https://book-api/graphql',
  query,
  variables: { title: 'Example Title' },
})

Using graphql-tag and TypeScript

import { gqlFetch } from 'simple-gql'
import gql from 'graphql-tag'

interface QueryVaraibles {
  title: string
}
interface QueryData {
  Book: {
    publishDate: number
    author: {
      name: string
    }
  }
}

const query = gql`
  query getBook($title: String!) {
    Book(title: $title) {
      publishDate
      author {
        name
      }
    }
  }
`

const response = await gqlFetch<QueryData, QueryVariables>({
  url: 'https://book-api/graphql',
  query,
  variables: { title: 'Example Title' },
})

Creating a re-useable client with TypeScript

We can create a reusable client with some function composition and closures. See the example below for a TypeScript example.

import { gqlFetch } from 'simple-gql'
import { ASTNode } from 'graphql'

export const gqlRequest = async <T, V>(
  query: string | ASTNode,
  variables: V,
) => {
  // Perform any pre-request logic you need here.
  const accessToken = myTokenLogic()

  const response = await gqlFetch<T, V>({
    query,
    variables,
    url: 'https://your-endpoint.com/graphql',
    options: {
      // Your default options.
      headers: {
        Authorization: `token ${accessToken}`,
      },
    },
  })

  return response
}

Error handling

This library will make no attempt to handle your errors and leaves it up to the developer to handle them. It will throw any error it receives, just like a fetch request would.

API

gqlFetch

Make a plain GraphQL request.

const gqlFetch: <T>({ url: string, query: string | ASTNode, variables?: object, options?: Options, }) => Promise<T>

Accepts an object as a parameter with the following keys:

  • url: The endpoint to request.
  • query: GraphQL query as a string or ASTNode returned from graphql-tag.
  • variables: GraphQL variable object to inject into your query.
  • options: Options. See options for all available options.

Returns a Promise.

Options

gqlFetch takes an options object that accepts the same options a normal fetch would accept in addition to the following:

  • fetch: Fetch implementation to utilize. Defaults to window.fetch. Use this if you plan to use this package in Node.

If you need to send your GraphQL request via GET, just set the appropriate headers.method option. gqlFetch will handle setting your query and variables as querystring parameters.

License

MIT.