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

@kbrandwijk/graphql-yoga

v0.3.1

Published

<p align="center"><img src="https://imgur.com/Sv6j0B6.png" width="100" /></p>

Downloads

3

Readme

graphql-yoga

Build Status npm version Greenkeeper badge

Fully-featured GraphQL Server with focus on easy setup, performance & great developer experience

Features

  • Easiest way to run a GraphQL server: Good defaults & includes everything you need with minimal setup.
  • Includes Subscriptions: Built-in support for GraphQL Subscriptions using WebSockets.
  • Compatible: Works with all GraphQL clients (Apollo, Relay...) and fits seamless in your GraphQL workflow.

graphql-yoga is based on the following libraries & tools:

Install

yarn add graphql-yoga

Usage

Quickstart (Hosted demo)

import { GraphQLServer } from 'graphql-yoga'
// ... or using `require()`
// const { GraphQLServer } = require('graphql-yoga')

const typeDefs = `
  type Query {
    hello(name: String): String!
  }
`

const resolvers = {
  Query: {
    hello: (_, { name }) => `Hello ${name || 'World'}`,
  },
}

const server = new GraphQLServer({ typeDefs, resolvers })
server.start(() => console.log('Server is running on localhost:4000'))

To get started with graphql-yoga, follow the instructions in the READMEs of the examples.

API

GraphQLServer

constructor(props: Props): GraphQLServer

The props argument accepts the following fields:

| Key | Type | Default | Note | | --- | --- | --- | --- | | typeDefs | String | null | Contains GraphQL type definitions in SDL (required if schema is not provided *) | | resolvers | Object | null | Contains resolvers for the fields specified in typeDefs (required if schema is not provided *) | | schema | Object | null | An instance of GraphQLSchema (required if typeDefs and resolvers are not provided *) | | context | Object | {} | Contains custom data being passed through your resolver chain | | options | Object | {} | See below |

(*) There are two major ways of providing the schema information to the constructor:

  1. Provide typeDefs and resolvers and omit the schema, in this case graphql-yoga will construct the GraphQLSchema instance using makeExecutableSchema from graphql-tools.
  2. Provide the schema directly and omit typeDefs and resolvers.

The options object has the following fields:

| Key | Type | Default | Note | | --- | --- | --- | --- | | cors | Object | null | Contains configuration options for cors | | disableSubscriptions | Boolean | false | Indicates whether subscriptions should be en- or disabled for your server | | tracing | Boolean or String | false | Indicates whether Apollo Tracing should be en- or disabled for your server (if a string is provided, accepted values are: 'enabled', 'disabled', 'http-header') | | port | Number | 4000 | Determines the port your server will be listening on (note that you can also specify the port by setting the PORT environment variable) | | endpoint | String | '/' | Defines the HTTP endpoint of your server | | subscriptionsEndpoint | String | '/' | Defines the subscriptions (websocket) endpoint for your server | | playgroundEndpoint | String | '/' | Defines the endpoint where you can invoke the Playground | | disablePlayground | Boolean | false | Indicates whether the Playground should be enabled | | uploads | Object | null | Provides information about upload limits; the object can have any combination of the following three keys: maxFieldSize, maxFileSize, maxFiles; each of these have values of type Number |

Here is example of creating a new server:

const options = {
  disableSubscriptions: false,  // same as default value
  port: 8000,
  endpoint: '/graphql',
  subscriptionsEndpoint: '/subscriptions',
  playgroundEndpoint: '/playground',
  disablePlayground: false      // same as default value
}

const typeDefs = `
  type Query {
    hello(name: String): String!
  }
`

const resolvers = {
  Query: {
    hello: (_, { name }) => `Hello ${name || 'World'}`,
  },
}

const server = new GraphQLServer({ typeDefs, resolvers, options })

start(callback: (() => void) = (() => null)): Promise<void>

Once your GraphQLServer is instantiated, you can call the start method on it. It takes one argument callback, a function that's invoked right before the server is started. As an example, the callback can be used to print information that the server was now started:

server.start(() => console.log(`Server started, listening on port 8000 for incoming requests.`))

PubSub

See the original documentation in graphql-subscriptions.

Endpoints

Examples

There are three examples demonstrating how to quickly get started with graphql-yoga:

  • hello-world: Basic setup for building a schema and allowing for a hello query.
  • subscriptions: Basic setup for using subscriptions with a counter that increments every 2 seconds and triggers a subscriptions.
  • fullstack: Fullstack example based on create-react-app demonstrating how to query data from graphql-yoga with Apollo Client 2.0.

Workflow

Once your graphql-yoga server is running, you can use GraphQL Playground out of the box – typically running on localhost:4000. (Read here for more information.)

Deployment

now

To deploy your graphql-yoga server with now, follow these instructions:

  1. Download Now Desktop
  2. Navigate to the root directory of your graphql-yoga server
  3. Run now in your terminal

Heroku

To deploy your graphql-yoga server with Heroku, follow these instructions:

  1. Download and install the Heroku Command Line Interface (previously Heroku Toolbelt)
  2. Log In to the Heroku CLI with heroku login
  3. Navigate to the root directory of your graphql-yoga server
  4. Create the Heroku instance by executing heroku create
  5. Deploy your GraphQL server by executing git push heroku master

up (Coming soon 🔜 )

AWS Lambda (Coming soon 🔜 )

FAQ

How does graphql-yoga compare to apollo-server and other tools?

As mentioned above, graphql-yoga is built on top of a variety of other packages, such as graphql.js, express and apollo-server. Each of these provide a certain piece of functionality required for building a GraphQL server.

Using these packages individually incurs overhead in the setup process and requires you to write a lot of boilerplate. graphql-yoga abstracts away the initial complexity and required boilerplate and let's you get started quickly with a set of sensible defaults for your server configuration.

graphql-yoga is like create-react-app for building GraphQL servers.

Can't I just setup my own GraphQL server using express and graphql.js?

graphql-yoga is all about convenience and a great "Getting Started"-experience by abstracting away the complexity that comes when you're building your own GraphQL from scratch. It's a pragmatic approach to bootstrap a GraphQL server, much like create-react-app removes friction when first starting out with React.

Whenever the defaults of graphql-yoga are too tight of a corset for you, you can simply eject from it and use the tooling it's build upon - there's no lock-in or any other kind of magic going on preventing you from this.

How to eject from the standard express setup?

The core value of graphql-yoga is that you don't have to write the boilerplate required to configure your express.js application. However, once you need to add more customized behaviour to your server, the default configuration provided by graphql-yoga might not suit your use case any more. For example, it might be the case that you want to add more custom middleware to your server, like for logging or error reporting.

For these cases, GraphQLServer exposes the express.Application directly via its express property:

server.express.use(myMiddleware())

Help & Community Slack Status

Join our Slack community if you run into issues or have questions. We love talking to you!