🎬 That's a Wrap for GraphQLConf 2024! • Watch the Videos • Check out the recorded talks and workshops

Code Using GraphQL

Sort by:
GraphQL.js
The reference implementation of the GraphQL specification, designed for running GraphQL in a Node.js environment.
Last release 3 months ago20kMIT License
README

To run a GraphQL.js hello world script from the command line:

npm install graphql

Then run node hello.js with this code in hello.js:

var { graphql, buildSchema } = require("graphql")
 
var schema = buildSchema(`
  type Query {
    hello: String
  }
`)
 
var rootValue = { hello: () => "Hello world!" }
 
var source = "{ hello }"
 
graphql({ schema, source, rootValue }).then(response => {
  console.log(response)
})
Apollo Client
A powerful JavaScript GraphQL client, designed to work well with React, React Native, Angular 2, or just plain JavaScript.
Last release 2 days ago19kMIT License
Relay
Facebook's framework for building React applications that talk to a GraphQL backend.
Last release 1 month ago18kMIT License
README

Relay is a JavaScript framework for building data-driven React applications.

  • Declarative: Never again communicate with your data store using an imperative API. Simply declare your data requirements using GraphQL and let Relay figure out how and when to fetch your data.
  • Colocation: Queries live next to the views that rely on them, so you can easily reason about your app. Relay aggregates queries into efficient network requests to fetch only what you need.
  • Mutations: Relay lets you mutate data on the client and server using GraphQL mutations, and offers automatic data consistency, optimistic updates, and error handling.

See how to use Relay in your own project.

GraphiQL
An interactive in-browser GraphQL IDE.
Last release 1 week ago16kMIT License
Apollo Server
A GraphQL server from Apollo that works with any Node.js HTTP framework
Last release 2 weeks ago14kMIT License
README

To run a hello world server with Apollo Server:

npm install @apollo/server graphql

Then run node server.js with this code in server.js:

import { ApolloServer } from "@apollo/server"
import { startStandaloneServer } from "@apollo/server/standalone"
 
const server = new ApolloServer({
  typeDefs,
  resolvers,
})
 
const { url } = await startStandaloneServer(server)
 
console.log(`🚀 Server ready at ${url}`)

Apollo Server has a built in standalone HTTP server and middleware for Express, and has an framework integration API that supports all Node.js HTTP server frameworks and serverless environments via community integrations.

Apollo Server has a plugin API, integration with Apollo Studio, and performance and security features such as caching, automatic persisted queries, and CSRF prevention.

Postgraphile
builds a powerful, extensible and performant GraphQL API from a PostgreSQL schema in seconds; saving you weeks if not months of development time.
Last release 1 year ago13kOther
GraphQL Code Generator
GraphQL code generator with flexible support for custom plugins and templates like Typescript (frontend and backend), React Hooks, resolvers signatures and more.
Last release 3 weeks ago11kMIT License
AWS Amplify
A JavaScript library for application development using cloud services, which supports GraphQL backend and React components for working with GraphQL data.
Last release 4 days ago9kApache License 2.0
urql
A highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
Last release 1 week ago9kMIT License
README

urql is a GraphQL client that exposes a set of helpers for several frameworks. It’s built to be highly customisable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients.

  • Currently supports React, React Native, Preact, Svelte, and Vue, and is supported by GraphQL Code Generator.
  • Logical yet simple default behaviour and document caching, and normalized caching via @urql/exchange-graphcache
  • Fully customizable behaviour via “exchanges” (addon packages)
graphql-yoga
GraphQL Yoga is a batteries-included cross-platform GraphQL over HTTP spec-compliant GraphQL Server using Envelop and GraphQL Tools.
Last release 4 days ago8kMIT License
README
  • Built around the Fetch API Request & Response objects
  • GraphQL over HTTP compliant
  • Extensible GraphQL Engine powered by Envelop
  • GraphQL Subscriptions over HTTP
  • Handle file uploads with GraphQL
  • Integrates with AWS Lambda, Cloudflare Workers, Deno, Express, Next.js, SvelteKit, and more.

To run a hello world server with graphql-yoga:

npm install graphql-yoga graphql

Then create a server using the createServer import:

import { createServer } from "http"
import { createSchema, createYoga } from "graphql-yoga"
 
createServer(
  createYoga({
    schema: createSchema({
      typeDefs: /* GraphQL */ `
        type Query {
          hello: String
        }
      `,
      resolvers: {
        Query: {
          hello: () => "Hello Hello Hello",
        },
      },
    }),
  }),
).listen(4000, () => {
  console.info("GraphQL Yoga is listening on http://localhost:4000/graphql")
})

Depending on your deployment target, you may need to use an additional library. See the documentation for further details.

GraphQL Request
A simple and flexible JavaScript GraphQL client that works in all JavaScript environments (the browser, Node.js, and React Native) - basically a lightweight wrapper around fetch.
Last release 4 years ago6kMIT License
GraphQL Tools
A set of utils for faster development of GraphQL tools (Schema and documents loading, Schema merging and more).
Last release 5 days ago5kMIT License
GraphQLShield
A GraphQL tool to ease the creation of permission layer.
Last release 1 year ago4kMIT License
README

GraphQL Shield helps you create a permission layer for your application. Using an intuitive rule-API, you’ll gain the power of the shield engine on every request and reduce the load time of every request with smart caching. This way you can make sure your application will remain quick, and no internal data will be exposed.

import { rule, shield, and, or, not } from "graphql-shield"
 
// Rules
 
const isAuthenticated = rule({ cache: "contextual" })(async (
  parent,
  args,
  ctx,
  info,
) => {
  return ctx.user !== null
})
 
const isAdmin = rule({ cache: "contextual" })(async (
  parent,
  args,
  ctx,
  info,
) => {
  return ctx.user.role === "admin"
})
 
const isEditor = rule({ cache: "contextual" })(async (
  parent,
  args,
  ctx,
  info,
) => {
  return ctx.user.role === "editor"
})
 
// Permissions
 
const permissions = shield({
  Query: {
    frontPage: not(isAuthenticated),
    fruits: and(isAuthenticated, or(isAdmin, isEditor)),
    customers: and(isAuthenticated, isAdmin),
  },
  Mutation: {
    addFruitToBasket: isAuthenticated,
  },
  Fruit: isAuthenticated,
  Customer: isAdmin,
})
 
// Server
 
const server = new GraphQLServer({
  typeDefs,
  resolvers,
  middlewares: [permissions],
  context: req => ({
    ...req,
    user: getUser(req),
  }),
})
graphqurl
curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a dead-simple universal javascript GraphQL client.
3kApache License 2.0
GraphQL Mesh
GraphQL Mesh allows you to use GraphQL query language to access data in remote APIs that don't run GraphQL (and also ones that do run GraphQL). It can be used as a gateway to other services, or run as a local GraphQL schema that aggregates data from remote APIs.
Last release 3 days ago3kMIT License
Mercurius
Mercurius is a flexible and extendible GraphQL adapter for Fastify, a blazing-fast web framework with the least overhead and a powerful plugin architecture.
Last release 1 month ago2kMIT License
README

To run an hello world script with mercurius:

npm install fastify mercurius

Then run node app.js with this code in app.js:

const Fastify = require("fastify")
const mercurius = require("mercurius")
 
const schema = `
  type Query {
    hello(name: String): String!
  }
`
 
const resolvers = {
  Query: {
    hello: async (_, { name }) => `hello ${name || "world"}`,
  },
}
 
const app = Fastify()
app.register(mercurius, {
  schema,
  resolvers,
})
 
app.listen(3000)
 
// Call IT!
// curl 'http://localhost:3000/graphql' \
//  -H 'content-type: application/json' \
//  --data-raw '{"query":"{ hello(name:\"Marcurius\") }" }'
GiraphQL
A plugin based schema builder for creating code-first GraphQL schemas in typescript
Last release 5 days ago2kISC License
README

GiraphQL makes writing type-safe schemas simple, and works without a code generator, build process, or extensive manual type definitions.

import { ApolloServer } from "apollo-server"
import SchemaBuilder from "@giraphql/core"
 
const builder = new SchemaBuilder({})
 
builder.queryType({
  fields: t => ({
    hello: t.string({
      args: {
        name: t.arg.string({}),
      },
      resolve: (parent, { name }) => `hello, ${name || "World"}`,
    }),
  }),
})
 
new ApolloServer({
  schema: builder.toSchema({}),
}).listen(3000)
GraphQL CLI
A command line tool for common GraphQL development workflows.
Last release 4 years ago2kMIT License
GraphQL Scalars
A library of custom GraphQL scalar types for creating precise, type-safe GraphQL schemas.
Last release 8 months ago2kMIT License
graphql-hooks
Minimal React hooks-first GraphQL client with a tiny bundle, SSR support and caching
Last release 5 months ago2kOther
README
  • 🥇 First-class hooks API
  • ⚖️ Tiny bundle: only 7.6kB (2.8 gzipped)
  • 📄 Full SSR support: see graphql-hooks-ssr
  • 🔌 Plugin Caching: see graphql-hooks-memcache
  • 🔥 No more render props hell
  • ⏳ Handle loading and error states with ease

Quickstart

npm install graphql-hooks

First you’ll need to create a client and wrap your app with the provider:

import { GraphQLClient, ClientContext } from "graphql-hooks"
 
const client = new GraphQLClient({
  url: "/graphql",
})
 
function App() {
  return (
    <ClientContext.Provider value={client}>
      {/* children */}
    </ClientContext.Provider>
  )
}

Now in your child components you can make use of useQuery:

import { useQuery } from "graphql-hooks"
 
const HOMEPAGE_QUERY = `query HomePage($limit: Int) {
  users(limit: $limit) {
    id
    name
  }
}`
 
function MyComponent() {
  const { loading, error, data } = useQuery(HOMEPAGE_QUERY, {
    variables: {
      limit: 10,
    },
  })
 
  if (loading) return "Loading..."
  if (error) return "Something Bad Happened"
 
  return (
    <ul>
      {data.users.map(({ id, name }) => (
        <li key={id}>{name}</li>
      ))}
    </ul>
  )
}
GraphQL-WS
Coherent, zero-dependency, lazy, simple, GraphQL over WebSocket Protocol compliant server and client.
Last release 7 months ago2kMIT License
GraphQL-WS
Coherent, zero-dependency, lazy, simple, GraphQL over WebSocket Protocol compliant server and client.
Last release 7 months ago2kMIT License
GraphQL Inspector
Compare schemas, validate documents, find breaking changes, find similar types, schema coverage, and more.
Last release 5 days ago2kMIT License
Lokka
A simple JavaScript GraphQL client that works in all JavaScript environments (the browser, Node.js, and React Native).
2kMIT License
GraphQL Modules
GraphQL Modules lets you separate your backend implementation to small, reusable, easy-to-implement and easy-to-test pieces.
Last release 3 weeks ago1kMIT License
GraphQL Config
One configuration for all your GraphQL tools (supported by most tools, editors & IDEs).
Last release 1 month ago1kMIT License
GraphQL Middleware
Split up your GraphQL resolvers in middleware functions.
Last release 1 year ago1kMIT License
README

GraphQL Middleware is a schema wrapper which allows you to manage additional functionality across multiple resolvers efficiently.

Features

💡 Easy to use: An intuitive, yet familiar API that you will pick up in a second. 💪 Powerful: Allows complete control over your resolvers (Before, After). 🌈 Compatible: Works with any GraphQL Schema.

Example

const { ApolloServer } = require("apollo-server")
const { makeExecutableSchema } = require("@graphql-tools/schema")
 
const typeDefs = `
type Query {
  hello(name: String): String
  bye(name: String): String
}
`
const resolvers = {
  Query: {
    hello: (root, args, context, info) => {
      console.log(`3. resolver: hello`)
      return `Hello ${args.name ? args.name : "world"}!`
    },
    bye: (root, args, context, info) => {
      console.log(`3. resolver: bye`)
      return `Bye ${args.name ? args.name : "world"}!`
    },
  },
}
 
const logInput = async (resolve, root, args, context, info) => {
  console.log(`1. logInput: ${JSON.stringify(args)}`)
  const result = await resolve(root, args, context, info)
  console.log(`5. logInput`)
  return result
}
 
const logResult = async (resolve, root, args, context, info) => {
  console.log(`2. logResult`)
  const result = await resolve(root, args, context, info)
  console.log(`4. logResult: ${JSON.stringify(result)}`)
  return result
}
 
const schema = makeExecutableSchema({ typeDefs, resolvers })
 
const schemaWithMiddleware = applyMiddleware(schema, logInput, logResult)
 
const server = new ApolloServer({
  schema: schemaWithMiddleware,
})
 
await server.listen({ port: 8008 })
SpectaQL
SpectaQL generates static HTML documentation from a GraphQL schema.
1kMIT License
README

SpectaQL is a Node.js library that generates static documentation for a GraphQL schema using a variety of options:

  • From a live endpoint using the introspection query.
  • From a file containing an introspection query result.
  • From a file, files or glob leading to the schema definitions in SDL.

Out of the box, SpectaQL generates a single 3-column HTML page and lets you choose between a couple built-in themes. A main goal of the project is to be easily and extremely customizable—it is themeable and just about everything can be overridden or customized.

npm install --dev spectaql
# OR
yarn add -D spectaql
 
# Then generate your docs
npm run spectaql my-config.yml
# OR
yarn spectaql my-config.yml
SOFA
Generate REST API from your GraphQL API.
Last release 10 months ago1kMIT License
GQty
The No-GraphQL client for TypeScript.
Last release 1 day ago1kMIT License
README

GQty is a query builder, a query fetcher and a cache manager solution all-in-one.

You interact with your GraphQL endpoint via Proxy objects. Under the hood, GQty captures what is being read, checks cache validity, fetch missing contents and then updates the cache for you.

Start using GQty by simply running our interactive codegen:

# npm
npx @gqty/cli
 
# yarn
yarn dlx @gqty/cli
 
# pnpm
pnpm dlx @gqty/cli

GQty also provides framework specific integrations such as @gqty/react and @gqty/solid, which can be installed via our CLI.

GraphQL-ESLint
GraphQL-ESLint integrates GraphQL AST in the ESLint core (as a parser).
Last release 21 hours ago1kMIT License
GraphQL Live Query
Real-Time with GraphQL for any GraphQL schema or transport.
Last release 2 years ago437MIT License
nanographql
Tiny GraphQL client library using template strings.
421MIT License
GraphQL Language Service
An interface for building GraphQL language services for IDEs (diagnostics, autocomplete etc).
420Unknown
GraphQL-SSE
Zero-dependency, HTTP/1 safe, simple, GraphQL over Server-Sent Events Protocol server and client.
Last release 7 months ago390MIT License
GraphQL-SSE
Zero-dependency, HTTP/1 safe, simple, GraphQL over Server-Sent Events Protocol server and client.
Last release 7 months ago390MIT License
GraphQL-HTTP
Simple, pluggable, zero-dependency, GraphQL over HTTP spec compliant server, client and audit suite.
Last release 1 week ago316MIT License
GraphQL-HTTP
Simple, pluggable, zero-dependency, GraphQL over HTTP spec compliant server, client and audit suite.
Last release 1 week ago316MIT License
GraphQL-HTTP
Simple, pluggable, zero-dependency, GraphQL over HTTP spec compliant server, client and audit suite.
Last release 1 week ago316MIT License
Grafoo
An all purpose GraphQL client with view layer integrations for multiple frameworks in just 1.6kb.
Last release 6 years ago274MIT License
Pylon
A code-first framework for GraphQL API development, where your schema reflects your functionality. Run npm create pylon@latest to get started.
Last release 4 days ago170Apache License 2.0
README
  1. Create
npm create pylon@latest
  1. Develop

Example service:

import { app } from "@getcronit/pylon"
 
class User {
  name: string
  email: string
  constructor(name: string, email: string) {
    this.name = name
    this.email = email
  }
}
 
const users = [
  new User("Alice", "alice@example.com"),
  new User("Bob", "bob@example.com"),
  new User("Charlie", "charlie@example.com"),
]
 
export const graphql = {
  Query: {
    users,
    user: (name: string) => {
      return users.find(user => user.name === name)
    },
  },
  Mutation: {
    addUser: (name: string, email: string) => {
      const user = new User(name, email)
      users.push(user)
      return user
    },
  },
}
 
export default app
  1. Query
query User {
  user(name: "Alice") {
    name
    email
  }
}
 
query Users {
  users {
    name
    email
  }
}
 
mutation AddUser {
  addUser(name: "Corina", email: "corina@example.com") {
    name
    email
  }
}
graphql-ts-client
GraphQL client for TypeScript, automatically infers the type of the returned data according to the strongly typed query request
Last release 11 months ago148MIT License
gq-loader
A simple JavaScript GraphQL client,Let the *.gql file be used as a module through webpack loader.
59Unknown
Microfiber
A library to query and manipulate GraphQL Introspection Query results.
32MIT License
README

Microfiber is a JavaScript library that allows:

  • Digging through your Introspection Query Results for a specific Query, Mutation, Type, Field, Argument or Subscription.
  • Removing a specific Query, Mutation, Type, Field/InputField, Argument or Subscription from your Introspection Query Results.
  • Removing Queries, Mutations, Fields/InputFields or Arguments that refer to Type that does not exist in - or has been removed from - your Introspection Query Results.
npm install microfiber
# OR
yarn add microfiber

Then in JS:

import { Microfiber } from "microfiber"
 
const introspectionQueryResults = {
  // ...
}
 
const microfiber = new Microfiber(introspectionQueryResults)
 
// ...do some things to your schema with `microfiber`
 
const cleanedIntrospectonQueryResults = microfiber.getResponse()
GraphQLBox client
An extensible GraphQL client with modules for react, caching, request parsing, web workers, websockets and more...
25MIT License
README

The example below installs and initializes the GraphQLBox client with a persisted cache and debugging enabled.

npm install @graphql-box/core @graphql-box/client @graphql-box/request-parser @graphql-box/cache-manager @graphql-box/debug-manager @graphql-box/fetch-manager @graphql-box/helpers @cachemap/core @cachemap/reaper @cachemap/indexed-db @cachemap/constants @cachemap/types
import Cachemap from "@cachemap/core"
import indexedDB from "@cachemap/indexed-db"
import reaper from "@cachemap/reaper"
import CacheManager from "@graphql-box/cache-manager"
import Client from "@graphql-box/client"
import DebugManager from "@graphql-box/debug-manager"
import FetchManager from "@graphql-box/fetch-manager"
import RequestParser from "@graphql-box/request-parser"
import introspection from "./introspection-query"
 
const requestManager = new FetchManager({
  apiUrl: "/api/graphql",
  batchRequests: true,
  logUrl: "/log/graphql",
})
 
const client = new Client({
  cacheManager: new CacheManager({
    cache: new Cachemap({
      name: "client-cache",
      reaper: reaper({ interval: 300000 }),
      store: indexedDB(/* configure */),
    }),
    cascadeCacheControl: true,
    typeCacheDirectives: {
      // Add any type specific cache control directives in the format:
      // TypeName: "public, max-age=3",
    },
  }),
  debugManager: new DebugManager({
    environment: "client",
    log: (message, data, logLevel) => {
      requestManager.log(message, data, logLevel)
    },
    name: "CLIENT",
    performance: self.performance,
  }),
  requestManager,
  requestParser: new RequestParser({ introspection }),
})
 
// Meanwhile... somewhere else in your code
 
const { data, errors } = await client.request(queryOrMutation)
GraphQLBox server
An extensible GraphQL server with modules for caching, request parsing, debugging, subscriptions and more...
25MIT License
README

The example below installs and initializes the GraphQLBox server with a persisted cache and debugging enabled.

npm install @graphql-box/core @graphql-box/server @graphql-box/client @graphql-box/request-parser @graphql-box/cache-manager @graphql-box/debug-manager @graphql-box/execute @graphql-box/helpers @cachemap/core @cachemap/reaper @cachemap/redis @cachemap/constants @cachemap/types
import Cachemap from "@cachemap/core"
import redis from "@cachemap/redis"
import reaper from "@cachemap/reaper"
import CacheManager from "@graphql-box/cache-manager"
import Client from "@graphql-box/client"
import DebugManager from "@graphql-box/debug-manager"
import Execute from "@graphql-box/execute"
import RequestParser from "@graphql-box/request-parser"
import Server from "@graphql-box/server"
import { makeExecutableSchema } from "@graphql-tools/schema"
import { performance } from "perf_hooks"
import { schemaResolvers, schemaTypeDefs } from "./schema"
import logger from "./logger"
 
const schema = makeExecutableSchema({
  typeDefs: schemaTypeDefs,
  resolvers: schemaResolvers,
})
 
const server = new Server({
  client: new Client({
    cacheManager: new CacheManager({
      cache: new Cachemap({
        name: "server-cache",
        reaper: reaper({ interval: 300000 }),
        store: redis(/* configure */),
      }),
      cascadeCacheControl: true,
      typeCacheDirectives: {
        // Add any type specific cache control directives in the format:
        // TypeName: "public, max-age=3",
      },
    }),
    debugManager: new DebugManager({
      environment: "server",
      log: (...args) => {
        logger.log(...args)
      },
      name: "SERVER",
      performance,
    }),
    requestManager: new Execute({ schema }),
    requestParser: new RequestParser({ schema }),
  }),
})
 
// Meanwhile... somewhere else in your code
 
app.use("api/graphql", graphqlServer.request())
Brangr
Browse Any Graph - A user-friendly viewer for any GraphQL service
Last release 1 year ago3Mozilla Public License 2.0
README

Brangr - Browse Any Graph

  • Brangr is a simple, unique tool that any web server can host to provide a user-friendly browser/viewer for any GraphQL service (or many).

  • Brangr formats GraphQL results attractively, via a selection of user-configurable layouts. It lets users extract the generated HTML, and its source JSON. It provides a clever schema browser. It has built-in docs.

  • Brangr enables sites hosting it to present users with a collection of pre-fab GraphQL requests, which they can edit if desired, and let them create their own requests. And it allows sites to define custom CSS styling for all aspects of the formatted results.

  • Try it at the public Brangr site.

Example

query {
  heroes(_layout: { type: table }) { # _layout arg not sent to service
    first
    last
  }
}

Brangr renders the above query as follows (though not in a quote block):

heroes...
First Last
ArthurDent
Ford Prefect
ZaphodBeeblebrox