• Stars
    star
    787
  • Rank 57,828 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Envelop is a lightweight library allowing developers to easily develop, share, collaborate and extend their GraphQL execution layer. Envelop is the missing GraphQL plugin system.

GraphQL Conf 2023

Envelop

envelop is a lightweight JavaScript (/TypeScript) library for wrapping GraphQL execution layer and flow, allowing developers to develop, share and collaborate on GraphQL-related plugins while filling the missing pieces in GraphQL implementations.

envelop aims to extend the GraphQL execution flow by adding plugins that enrichs the feature set of your application.

@envelop/core: npm version

Envelop is created and maintained by The Guild, and used in production by our clients.

Envelop Key Concepts

  • Lightweight
  • Wraps the entire GraphQL pipeline, based on plugins
  • Low-level API for extending the execution layer
  • Agnostic to GraphQL Engine
  • Agnostic to the HTTP layer
  • Agnostic to the schema tools
  • Plugins-based usage
  • No vendor lock-in
  • Amazing TypeScript support

You can read more about the key concepts or Envelop here

Getting Started

Start by adding the core of Envelop to your codebase:

yarn add graphql @envelop/core

Then, create a simple Envelop based on your GraphQL schema:

import * as GraphQLJS from 'graphql'
import { envelop, useEngine, useSchema } from '@envelop/core'

const mySchema = buildSchema(/* ... */) // GraphQLSchema

const getEnveloped = envelop({
  plugins: [useEngine(GraphQLJS), useSchema(mySchema)]
})

The result of envelop is a function that allows you to get everything you need for the GraphQL execution: parse, validate, contextBuilder and execute. Use that to run the client's GraphQL queries. Here's a pseudo-code example of how it should look like:

const httpServer = createServer()

httpServer.on('request', async (req, res) => {
  // Here you get the alternative methods that are bundled with your plugins
  // You can also pass the "req" to make it available for your plugins or GraphQL context.
  const { parse, validate, contextFactory, execute, schema } = getEnveloped({ req })

  // Parse the initial request and validate it
  const { query, variables } = JSON.parse(req.payload)
  const document = parse(query)
  const validationErrors = validate(schema, document)

  if (validationErrors.length > 0) {
    return res.end(JSON.stringify({ errors: validationErrors }))
  }

  // Build the context and execute
  const context = await contextFactory(req)
  const result = await execute({
    document,
    schema,
    variableValues: variables,
    contextValue: context
  })

  // Send the response
  res.end(JSON.stringify(result))
})

httpServer.listen(3000)

Behind the scenes, this simple workflow allows you to use Envelop plugins and hook into the entire request handling flow.

Here's a simple example for collecting metrics and log all incoming requests, using the built-in plugins:

const getEnveloped = envelop({
  plugins: [useEngine(GraphQLJS), useSchema(schema), useLogger(), useTiming()]
})

You can read more about here

Integrations / Examples

You can find the integrations and compatibility list, and code-based examples here

Available Plugins

You can explore all plugins in our Plugins Hub. If you wish your plugin to be listed here and under PluginsHub, feel free to add your plugin information in this file and create a Pull Request!

We provide a few built-in plugins within the @envelop/core, and many more plugins as standalone packages.

Envelop's Plugin Hub

Sharing / Composing envelops

After an envelop has been created, you can share it with others as a complete layer of plugins. This is useful if you wish to create a predefined layer of plugins, and share it with others. You can use it as a shell and as a base for writing shareable pieces of servers.

You can read more about Sharing and Composing Envelops here.

Write your own plugin!

Envelop plugins are just objects with functions, that provide contextual implementation for before/after of each phase, with a flexible API.

Here's a simple example that allows you to print the execution params:

const myPlugin = {
  onExecute({ args }) {
    console.log('Execution started!', { args })

    return {
      onExecuteDone({ result }) {
        console.log('Execution done!', { result })
      }
    }
  }
}

const getEnveloped = envelop({
  plugins: [
    /// ... other plugins ...,
    myPlugin
  ]
})

For a complete guide and API docs for custom plugins, please refer to Envelop website

Contributing

If this is your first time contributing to this project, please do read our Contributor Workflow Guide before you get started off.

Feel free to open issues and pull requests. We're always welcome support from the community.

Code of Conduct

Help us keep Envelop open and inclusive. Please read and follow our of Conduct as adopted from Contributor Covenant

License

GitHub license

MIT

More Repositories

1

graphql-live-query

Realtime GraphQL Live Queries with JavaScript
TypeScript
436
star
2

use-async-effect

React hook for async effects powered by generator functions.
TypeScript
195
star
3

graphql-bleeding-edge-playground

Demonstration of queries/mutations/defer/stream/subscriptions/live
TypeScript
137
star
4

graphql-schema-generator-rest

Generate your GraphQL schema from type definitions
JavaScript
97
star
5

graphiql-apollo-tracing

poc graphiql with apollo-tracing support
JavaScript
51
star
6

graphql-public-schema-filter

Filter your GraphQL graph into a subgraph. Code-first & SDL-first!
TypeScript
51
star
7

graphql-codegen-relay-plugins

Use the power of the relay-compiler with every GraphQL project!
TypeScript
39
star
8

relay-compiler-repl

Convince your team that you should use the relay-compiler 😉
TypeScript
34
star
9

graphql-live-chat

Chat built with GraphQL Live Subscriptions.
TypeScript
28
star
10

push-pull-async-iterable-iterator

Create an AsyncIterableIterator from anything while handling back-pressure!
TypeScript
23
star
11

character-overlay

Web App for adding an OBS overlay with character information such as name, picture, and health for your favorite role-playing game.
TypeScript
22
star
12

react-in-center-of-screen

Determine if a list item is in the center of your viewport https://codesandbox.io/s/1vw1q2288q
JavaScript
14
star
13

react-use-transition

TypeScript
14
star
14

ember-cli-css-preprocess

Process your stylesheets using various preprocessors like Sass or PostCSS. Looking for new maintainers!
JavaScript
13
star
15

vue-component-database

An online code editor for Vue Single File Components
Vue
11
star
16

bundle-anywhere

TypeScript
10
star
17

toposort

TypeScript toposort
TypeScript
8
star
18

cv-image-grid-detection

JavaScript
7
star
19

ember-card-stacks

Card Stacks inspired by https://tympanus.net/Development/CardStackEffects/
JavaScript
6
star
20

hive-workshop

GraphQL Hive Workshop Material
TypeScript
6
star
21

graphql-operation-merger

A tiny opinionated graphql operation merger
TypeScript
5
star
22

dsa-wiki-crawler

TypeScript
4
star
23

react-time-ago

Display formatted date strings in real-time
JavaScript
4
star
24

pokemon-tcg-deck-scraper-api

JavaScript
4
star
25

ssm-parameter-env

Supply your environment with the AWS Systems Manager Parameter Store
TypeScript
4
star
26

manga-exporter

Collection of utilities for extracting unlicensed community translated mangas from websites into eReader (Kindle) friendly format.
TypeScript
4
star
27

envelop-demo

TypeScript
3
star
28

psql-import-action

Github Action for importing a Postgres Database Dump
Shell
3
star
29

slonik-utilities

Utilities for the PostgreSQL Client Slonik
TypeScript
3
star
30

yoga-grats-demo

TypeScript
2
star
31

docker-image-node-10-with-docker-and-compose

Made for CI
Shell
1
star
32

pg-advisary-lock-check

TypeScript
1
star
33

serverless-codepipeline-slack-notifier

Publish Codepipeline Status Updates to a Slack Channel
JavaScript
1
star
34

n1ru4l

1
star
35

spotify-player-android-sdk

Shell
1
star
36

ember-cli-postcss-fixed

DEPRECATED PLEASE USE ember-cli-css-preprocess
JavaScript
1
star
37

my-library-boilerplate

i keep copy pasting this...
JavaScript
1
star
38

react-native-video-compress-example

Objective-C
1
star
39

graphql-tools-commonjs-import-repro

https://github.com/ardatan/graphql-tools/discussions/4581#discussioncomment-3329673
JavaScript
1
star
40

hive-github-workflow-example

I use this for testing graphql-hive GitHub integrations :)
1
star
41

temperature_converter

Rust
1
star
42

yet-another-react-boilerplate

🚀 Universal React Boilerplate. Using React Router, React Helmet and Apollo Client
JavaScript
1
star
43

docker-python-node-audio-processing

Dockerfile
1
star