@graphiql/toolkit

What is @graphiql/toolkit?

@graphiql/toolkit is a set of utilities and tools designed to help developers build and extend GraphiQL, a popular in-browser IDE for exploring GraphQL. It provides various functionalities to facilitate the creation of custom GraphiQL components and plugins.

What are @graphiql/toolkit's main functionalities?

GraphiQL Plugin Development

This feature allows developers to create custom fetchers for GraphiQL, enabling them to connect to different GraphQL endpoints. The code sample demonstrates how to create a fetcher and use it within a GraphiQL component.

const { createGraphiQLFetcher } = require('@graphiql/toolkit');

const fetcher = createGraphiQLFetcher({
  url: 'https://my-graphql-endpoint.com/graphql',
});

// Use the fetcher in a GraphiQL component
<GraphiQL fetcher={fetcher} />;

Schema Introspection

This feature provides utilities for schema introspection, allowing developers to fetch and explore the schema of a GraphQL endpoint. The code sample shows how to introspect a schema from a given endpoint.

const { introspectSchema } = require('@graphiql/toolkit');

async function getSchema() {
  const schema = await introspectSchema('https://my-graphql-endpoint.com/graphql');
  console.log(schema);
}

getSchema();

GraphQL Query Parsing

This feature includes tools for parsing GraphQL queries, which can be useful for analyzing and manipulating queries programmatically. The code sample demonstrates how to parse a GraphQL query string.

const { parse } = require('@graphiql/toolkit');

const query = `{
  user(id: "1") {
    name
    email
  }
}`;

const parsedQuery = parse(query);
console.log(parsedQuery);

Other packages similar to @graphiql/toolkit

graphql

The 'graphql' package is the core reference implementation of GraphQL for JavaScript. It provides the essential building blocks for creating GraphQL schemas and executing queries. While it doesn't offer the same level of integration with GraphiQL as @graphiql/toolkit, it is fundamental for any GraphQL-related development.

apollo-server

Apollo Server is a community-maintained open-source GraphQL server that works with any GraphQL schema. It provides a robust set of features for building a GraphQL API, including schema stitching, subscriptions, and more. Unlike @graphiql/toolkit, it focuses on server-side functionalities rather than client-side tools for GraphiQL.

graphql-tools

The 'graphql-tools' package offers a set of utilities for building and manipulating GraphQL schemas. It includes features like schema stitching, schema transforms, and mock data generation. While it overlaps with some functionalities of @graphiql/toolkit, it is more focused on schema management and server-side utilities.

README

Changelog | API Docs | NPM | Discord

@graphiql/toolkit

General purpose library as a dependency of GraphiQL.

A core dependency of the GraphiQL 2.0.0 initiative.

Docs

• createFetcher : a utility for creating a fetcher prop implementation for HTTP GET, POST including multipart, websockets fetcher
• more to come!

Todo

• Begin porting common type definitions used by GraphiQL and it's dependencies
• createGraphiQLFetcher utility for an easier fetcher
• Migrate over general purpose graphiql/src/utilities
• Utility to generate json schema spec from getQueryFacts for monaco, vscode, etc