• Stars
    star
    1,989
  • Rank 23,293 (Top 0.5 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 4 months ago

Reviews

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

Repository Details

📟 Command line tool for common GraphQL development workflows

GraphQL CLI

image

CI npm version Discord Chat

Help us to improve new GraphQL CLI. Check out the new structure and commands below! Feel free to contact us in Discord channel. We would love to hear your feedback.

Features

  • Helpful commands to improve your workflows
  • Compatible with editors and IDEs based on graphql-config
  • Powerful plugin system to extend graphql-cli with custom commands

Install

You can install the CLI using yarn by running the following command. This will add the graphql binary to your path.

yarn global add graphql-cli

The equivalent npm global install will also work.

Migration from 3.x.x to 4.x.x

Important: many aspects of GraphQL CLI syntax and structure have changed in 4.x.x. Please check out the Migration Guide to learn more.

Usage / Initialization

At the heart of a project created using GraphQL CLI is the GraphQL Config configuration file. For starters, this configuration lets the cd CLI tools know where all of the GraphQL documents and operations are. For more information about GraphQL Config, you can click here to learn more.

The most straightforward way to launch a GraphQL CLI-capable project with a working GraphQL Config setup is to use the init command from your desired workspace:

npx graphql-cli init

After a series of questions from the command-prompt, the system will use the inputs and selected project templates to generate a working project complete with a GraphQL Config setup. The GraphQL Config file is generated referencing the necessary files and ecosystem plugins.

You can also get started with GraphQL CLI by creating your own GraphQL Config file using an editor of your choice. Starting with a filename .graphqlrc.yml, for instance, we could add:

schema: "server/src/schema/**/*.graphql"
documents: "client/src/documents/**/*.graphql"

This is now a valid YAML-syntax GraphQL Config file. Using init from the GraphQL CLI will generate a project based on the instructions in your YAML.

Finally, one of the options with graphql init is to access schema using an OpenAPI or Swagger endpoint. Choose this option at the start of the Init question tree, and then follow the instructions to navigate to the URL of your choice.

Plugin System

Each command in GraphQL CLI is a seperate package, so you can have your own plugins or use the ones we maintain. You can have those commands by installing them like @graphql-cli/[COMMAND-NAME].

To configure a command/plugin, you need to update the extensions field in your GraphQL Config file (.graphqlrc.yml). See extensions: in the example below.

schema: 
  ./server/src/schema/**/*.ts:
    require: ts-node/register
documents: ./client/src/graphql/**/*.ts
extensions:
  codegen:
    generates:
      ./server/src/generated-types.d.ts:
        plugins:
          - typescript
          - typescript-resolvers
      ./client/src/generated-types.tsx:
        plugins:
          - typescript
          - typescript-operations
          - typescript-react-apollo
      config:
        withHooks: true
  graphback:
    model: './model/*.graphql'
    plugins:
      graphback-schema:
        outputPath: './src/schema/schema.graphql'
      ...

For a detailed example check out a template file here.

Some of the available Plugins are:

  • init - Creates a GraphQL project using a template or GraphQL Config file for your existing project.
  • codegen - GraphQL Code Generator's GraphQL CLI plugin. GraphQL Code Generator is a tool that generates code from your GraphQL schema and documents for your backend or frontend with flexible support for custom plugins and templates. Learn More
  • generate - Generate schema and client-side documents for your GraphQL project by using Graphback.
  • coverage - Schema coverage based on documents. Find out how many times types and fields are used in your application using GraphQL Inspector.
  • diff - Compares schemas and finds breaking or dangerous changes using GraphQL Inspector.
    • You can also compare your current schema against a base schema using URL, Git link and local file. You can give this pointer in the command line after graphql diff or in GraphQL Config file:
# ...
extensions:
  diff:
    baseSchema: git:origin/master:schema.graphql
  • similar - Get a list of similar types in order to find duplicates using GraphQL Inspector.
  • validate - Validates documents against a schema and looks for deprecated usage using GraphQL Inspector.
  • serve - Serves a GraphQL server, using an in memory database and a defined GraphQL schema. Please read through serve documentation to learn more about this command.

More plugins are definitely welcome! Please check the existing ones to see how to use GraphQL Config and GraphQL CLI API.

Contributing

Please read through the contributing guidelines

Writing your own plugin

GraphQL CLI supports custom plugins, you can find a tutorial and example here

Help & Community Discord Chat

Join our Discord chat if you run into issues or have questions. We're excited to welcome you to the community!

More Repositories

1

angular-meteor

Angular and Meteor - The perfect stack
Dockerfile
2,356
star
2

graphql-scalars

A library of custom GraphQL Scalars for creating precise type-safe GraphQL schemas.
TypeScript
1,879
star
3

awesome-meteor

A curated, community driven list of awesome Meteor packages, libraries, resources and shiny things
1,419
star
4

graphql-modules

Enterprise Grade Tooling For Your GraphQL Server
TypeScript
1,307
star
5

SOFA

The best way to create REST APIs - Generate RESTful APIs from your GraphQL Server
TypeScript
1,077
star
6

merge-graphql-schemas

A utility library to facilitate merging of modularized GraphQL schemas and resolver objects.
928
star
7

WhatsApp-Clone-Client-React

https://www.tortilla.academy/Urigo/WhatsApp-Clone-Tutorial
TypeScript
613
star
8

WhatsApp-Clone-Tutorial

https://www.tortilla.academy/Urigo/WhatsApp-Clone-Tutorial
556
star
9

WhatsApp-Clone-Server

https://www.tortilla.academy/Urigo/WhatsApp-Clone-Tutorial
TypeScript
451
star
10

angular2-meteor

Angular 2.0 and Meteor - the perfect stack
298
star
11

meteor-ionic

Ionic framework packaged for Meteor.
JavaScript
216
star
12

Ionic-MeteorCLI-WhatsApp

WhatsApp Clone tutorial with Ionic 1.0 and Meteor CLI
JavaScript
205
star
13

meteor-client-bundler

https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
JavaScript
193
star
14

angular-spinkit

SpinKit (http://tobiasahlin.com/spinkit/) spinners for AngularJS
CSS
189
star
15

meteor-angular2.0-socially

CSS
170
star
16

Ionic2CLI-Meteor-WhatsApp

WhatsApp Clone tutorial with Ionic 2.0 CLI and Meteor Server
TypeScript
163
star
17

meteor-angular-socially

angular-meteor example and tutorial app
TypeScript
155
star
18

angular-meteor-base

TypeScript
131
star
19

meteor-rxjs

Exposing Mongo Cursor as RxJS Observable
TypeScript
120
star
20

WhatsApp-Clone-Client-Angular

TypeScript
74
star
21

Ionic2-MeteorCLI-WhatsApp

WhatsApp Clone tutorial with Ionic 2.0 and Meteor CLI
TypeScript
53
star
22

tortilla

The Framework for tutorials
TypeScript
51
star
23

typescript-node-es-modules-example

Latest Typescript and Node - as bare-bone as possible example app
TypeScript
34
star
24

leumi-leumicard-bank-data-scraper

Open bank data for Leumi bank and Leumi card credit card
JavaScript
28
star
25

apollo-local-state-examples

3 stages and approaches for using GraphQL for your local state
TypeScript
26
star
26

WhatsApp-Clone-GraphQL-Angular-Material

TypeScript
25
star
27

angular-meteor-docs

Source for http://www.angular-meteor.com/
TypeScript
25
star
28

IonicCLI-Meteor-WhatsApp

WhatsApp Clone tutorial with Ionic 1.0 CLI and Meteor Server
JavaScript
22
star
29

angular2-meteor-accounts-ui

TypeScript
18
star
30

angular-embedly

JavaScript
18
star
31

israeli-bank-scrapers-modern-schemas

A new architecture for Poalim bank scraper to hopefully merge into Israeli-bank-scrapers when they are ready
TypeScript
17
star
32

angular-blaze-template

Include Blaze templates in your angular-meteor application
JavaScript
15
star
33

whatsapp-textrepo-angularcli-express

13
star
34

angular-meteor-seed

Seed app for AngularJS and meteor
JavaScript
13
star
35

accounter-fullstack

TypeScript
11
star
36

meteor-static-html-compiler

Compiles static HTML templates so you could import them from a module
TypeScript
10
star
37

angular2-meteor-auto-bootstrap

TypeScript
10
star
38

React-Meteor-Todo-app

JavaScript
10
star
39

Thinkster-MEAN-Tutorial-in-angular-meteor

angular-meteor version of Thinkster.io's mean-stack-tutorial
HTML
10
star
40

meteor-static-templates

Meteor plugin for importing static HTML templates
JavaScript
9
star
41

angular-meteor-auth

JavaScript
7
star
42

tutorial-infrastructure

TypeScript
5
star
43

WhatsApp-Server-GraphQL-Live-RxJS-Meteor

JavaScript
4
star
44

angular-meteor-legacy

Shell
3
star
45

meteor-native-packages

JavaScript
3
star
46

ng-vegas-first-example

HTML
3
star
47

node-express-course

An introduction to Node.js and Express.js servers
1
star
48

tortilla-website

JavaScript
1
star