Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: finally add diagrams #1601

Merged
merged 2 commits into from
Jun 26, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 18 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

> **Looking for the [GraphiQL Docs?](packages/graphiql/README.md)**: This is the root of the monorepo! The full GraphiQL docs are located at [`packages/graphiql`](packages/graphiql)

[![Build Status](https://travis-ci.org/graphql/graphiql.svg?branch=master)](https://travis-ci.org/graphql/graphiql)
[![Build Status](https://github.com/graphql/graphiql/actions?query=workflow%3A%22Node.JS+CI%22)](https://img.shields.io/github/workflow/status/graphql/graphiql)
[![Discord](https://img.shields.io/discord/586999333447270440.svg)](https://discord.gg/fHje6QG)
[![Code Coverage](https://img.shields.io/codecov/c/github/graphql/graphiql)](https://codecov.io/gh/graphql/graphiql)
![GitHub top language](https://img.shields.io/github/languages/top/graphql/graphiql)
Expand All @@ -29,6 +29,18 @@ The purpose of this monorepo is to give the GraphQL Community:
- an example of how to use this ecosystem with GraphiQL.
- examples of how to implement or extend GraphiQL.

### Latest Stable Ecosystem

`graphiql@1.0.x` and ecosystem are organized as below. Any further changes to `graphiql@1.0.x` are made against `1.0.0` branch

![Diagram of the current Monorepo and third party ecosystem](https://raw.githubusercontent.com/graphql/graphiql/main/resources/images/curent-ecosystem.jpg)

### Proposed Ecosystem

As we re-write for `graphiql@2.x` ecosystem, this monorepo will contain an sdk and plugins.

![Diagram of the proposed Monorepo and third party ecosystem](https://raw.githubusercontent.com/graphql/graphiql/main/resources/images/proposed-ecosystem.jpg)

## [GraphiQL](packages/graphiql#readme)

> **Breaking Changes & Improvements:** several interfaces are being dropped for new ones are arriving for GraphiQL 1.0.0! Read more in [this issue](https://github.com/graphql/graphiql/issues/1165)
Expand All @@ -41,21 +53,21 @@ The purpose of this monorepo is to give the GraphQL Community:
> ![npm bundle size (version)](https://img.shields.io/bundlephobia/min/graphiql/latest)
> ![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/graphiql/latest)

![https://raw.githubusercontent.com/graphql/graphiql/master/packages/graphiql/resources/graphiql.jpg](https://raw.githubusercontent.com/graphql/graphiql/master/packages/graphiql/resources/graphiql.jpg)
![Screenshot of GraphiQL with Doc Explorer Open](https://raw.githubusercontent.com/graphql/graphiql/main/packages/graphiql/resources/graphiql.jpg)

_/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE. [Try the live demo](http://graphql.org/swapi-graphql). We also have [a demo using our latest netlify build](http://graphiql-test.netlify.com) for the master branch.
_/ˈɡrafək(ə)l/_ A graphical interactive in-browser GraphQL IDE. [Try the live demo](http://graphql.org/swapi-graphql). We also have [a demo using our latest netlify build](http://graphiql-test.netlify.com) for the `main` branch.

The GraphiQL IDE, implemented in React, currently using [GraphQL mode for CodeMirror](packages/codemirror-graphql#readme) & [GraphQL Language Service](packages/graphql-language-service#readme).

**Learn more about [GraphiQL in packages/graphiql/README.md](packages/graphiql#readme)**
**Learn more about [GraphiQL in `packages/graphiql/README.md`](packages/graphiql#readme)**

### How To Setup/Implement GraphiQL

[![Edit graphiql-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/graphiql-example-nhzvc)

(This example shows that GraphiQL works with `create-react-app` without requiring additional configuration)

**The full [GraphiQL Readme](packages/graphiql#readme) explains** some of the ways to implement GraphiQL, and we also have the [examples](examples) directory as well!
**The [GraphiQL Readme](packages/graphiql#readme) explains** some of the ways to implement GraphiQL, and we also have the [examples](examples) directory as well!

## [CodeMirror GraphQL](packages/codemirror-graphql#readme)

Expand All @@ -64,7 +76,7 @@ The GraphiQL IDE, implemented in React, currently using [GraphQL mode for CodeMi
![npm downloads](https://img.shields.io/npm/dm/codemirror-graphql?label=npm%20downloads)
![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/codemirror-graphql)

![https://raw.githubusercontent.com/graphql/graphiql/master/packages/codemirror-graphql/resources/example.gifg](https://raw.githubusercontent.com/graphql/graphiql/master/packages/codemirror-graphql/resources/example.gif)
![Animated Codemirror GraphQL Completion Example](https://raw.githubusercontent.com/graphql/graphiql/main/packages/codemirror-graphql/resources/example.gif)

Provides CodeMirror with a parser mode for GraphQL along with a live linter and typeahead hinter powered by your GraphQL Schema

Expand Down Expand Up @@ -125,14 +137,6 @@ To get setup for local development of this monorepo, refer to [DEVELOPMENT.md](.
This is an open source project, and we welcome contributions. Please see
[CONTRIBUTING.md](CONTRIBUTING.md) for details on how to contribute.

## Initiatives

Lots of activity lately! These things are in progress currently:

- making web and IDE services 100% [LSP](https://langserver.org) specification complete
- a monaco editor mode
- extensions and themes to make GraphiQL a multipurpose tool for building GraphQL IDEs

### Fielding Proposals!

The door is open for proposals for the new GraphiQL Plugin API, and other ideas on how to make the rest of the IDE ecosystem more performant, scaleable, interoperable and extensible.
Expand Down
Binary file added resources/images/current-ecosystem.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file added resources/images/proposed-ecosystem.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.