GraphQL

用于浏览GraphQL的浏览器内IDE。(An in-browser IDE for exploring GraphQL. )

Github stars Tracking Chart

图形交互式浏览器中的GraphQL IDE。 试试现场演示

特性:

  • 语法突出显示
  • 智能类型优先于字段,参数,类型等。
  • 实时错误突出显示和报告。
  • 自动查询完成。
  • 运行并检查查询结果。

入门

使用node.js服务器?只需使用express-graphql!它可以自动呈现GraphiQL。使用另一个GraphQL服务? GraphiQL很容易设置。用npm:

npm install --save graphiql

或者,如果您使用yarn:

yarn add graphiql

GraphiQL提供了一个负责呈现UI的React组件,该组件应提供从GraphQL获取的功能,我们建议使用fetch标准API。

import React from 'react';
import ReactDOM from 'react-dom';
import GraphiQL from 'graphiql';
import fetch from 'isomorphic-fetch';
function graphQLFetcher(graphQLParams) {
return fetch(window.location.origin + '/graphql', {
method: 'post',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(graphQLParams),
}).then(response => response.json());
}
ReactDOM.render(, document.body);

使用webpack或browserify构建Web,或使用预先捆绑的graphiql.js文件。请参阅git存储库中的示例,了解如何使用预先捆绑的文件。

不要忘记在页面上包含CSS文件!如果你正在使用npm或yarn,你可以在node_modules /graphiql /graphiql.css中找到它,或者你可以从发布页面下载它。

有关设置GraphiQL的示例,请查看此存储库中的示例,其中还包含一些突出显示GraphiQL API的有用功能。

GraphQL介绍

GraphQL是一个用于api的查询语言,也是用于使用现有数据来实现这些查询的运行环境。GraphQL为您的API提供了一个完整的、可理解的数据描述,让客户能够准确地询问他们需要什么,什么也不需要,这使得随着时间的推移,开发API变得更加容易,并且能够支持强大的开发工具。

许多不同的编程语言支持GraphQL。 列表(http://graphql.org/code/#graphql-clients)包含一些更流行的服务器端框架,客户端库,服务和其他有用的东西。

服务器库

除了JavaScript中的GraphQL参考实现之外,服务器库还包括:

GraphQL Clients

Tools
Services
  • Apollo Optics: A service for monitoring the performance and usage of your GraphQL backend.
  • GraphCMS: A BaaS (Backend as a Service) that sets you up with a GraphQL backend as well as tools for content editors to work with the stored data.
  • Graphcool (github): A BaaS (Backend as a Service) providing a GraphQL backend for your applications with a powerful web ui for managing your database and stored data.
  • Reindex (github): A BaaS (Backend as a Service) that sets you up with a GraphQL backend targeted at applications using React and Relay.
  • Scaphold (github): A BaaS (Backend as a Service) that sets you up with a GraphQL backend for your applications with many different integrations.
More Stuff
  • awesome-graphql: A fantastic community maintained collection of libraries, resources, and more.

Overview

Name With Ownergraphql/graphiql
Primary LanguageTypeScript
Program languageJavaScript (Language Count: 13)
PlatformLinux, Mac, Windows
License:MIT License
Release Count1021
Last Release Namegraphiql@3.2.0 (Posted on 2024-04-05 20:24:43)
First Release Namev0.1.0 (Posted on 2015-08-24 09:52:30)
Created At2015-08-11 02:56:22
Pushed At2024-04-11 17:33:27
Last Commit At
Stargazers Count15.7k
Watchers Count235
Fork Count1.7k
Commits Count3.8k
Has Issues Enabled
Issues Count1127
Issue Open Count326
Pull Requests Count1813
Pull Requests Open Count55
Pull Requests Close Count432
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

GraphQL IDE Monorepo

Looking for the GraphiQL Docs?: This is the root of the monorepo! The full GraphiQL docs are located at packages/graphiql

Build Status
Discord
Code Coverage
GitHub top language
GitHub language count
Snyk Vulnerabilities for GitHub Repo
LGTM Grade
LGTM Alerts

Overview

GraphiQL is the reference implementation of this monorepo, GraphQL IDE, an official project under the GraphQL Foundation. The code uses the permissive MIT license.

Whether you want a simple GraphiQL IDE instance for your server, or a more advanced web or desktop GraphQL IDE experience for your framework or plugin, or you want to build an IDE extension or plugin, you've come to the right place!

The purpose of this monorepo is to give the GraphQL Community:

  • a solid, to-specification official language service (see: API Docs)
  • a comprehensive LSP server and CLI service for use with IDEs
  • a codemirror mode
  • a monaco mode (in the works)
  • an example of how to use this ecosystem with GraphiQL.
  • examples of how to implement or extend GraphiQL.

GraphiQL

NPM
jsDelivr hits (npm)
npm downloads
Snyk Vulnerabilities for npm package
npm bundle size (version)
npm bundle size (version)

https://raw.githubusercontent.com/graphql/graphiql/master/packages/graphiql/resources/graphiql.jpg

/ˈɡrafək(ə)l/ A graphical interactive in-browser GraphQL IDE. Try the live demo. We also have a demo using our latest netlify build for the master branch.

The GraphiQL IDE, implemented in React, currently using GraphQL mode for CodeMirror & GraphQL Language Service.

Learn more about GraphiQL in packagages/graphiql/README.md

How To Setup/Implement GraphiQL

Edit graphiql-example

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

The full GraphiQL Readme explains some of the ways to implement GraphiQL, and we also have the examples directory as well!

CodeMirror GraphQL

NPM
jsDelivr hits (npm)
npm downloads
Snyk Vulnerabilities for npm package

https://raw.githubusercontent.com/graphql/graphiql/master/packages/codemirror-graphql/resources/example.gifg

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

GraphQL Language Service

NPM
npm downloads
Snyk Vulnerabilities for npm package

Provides a command-line interface for running GraphQL Language Service Server for various IDEs.

GraphQL Language Service Server

NPM
npm downloads
Snyk Vulnerabilities for npm package

An almost fully LSP compliant server process backing the GraphQL Language Service.

GraphQL Language Service Interface

NPM
jsDelivr hits (npm)
npm downloads
Snyk Vulnerabilities for npm package

Runtime agnostic Language Service used by GraphQL mode for CodeMirror and GraphQL Language Service Server

GraphQL Language Service Parser

NPM
npm downloads
Snyk Vulnerabilities for npm package

An online immutable parser for GraphQL, designed to be used as part of syntax-highlighting and code intelligence tools such as for the GraphQL Language Service and codemirror-graphql.

GraphQL Language Service Types

NPM
npm downloads

Flow and Typescript type definitions for the GraphQL Language Service.

GraphQL Language Service Utilities

NPM
npm downloads
Snyk Vulnerabilities for npm package

Utilities to support the GraphQL Language Service.

Development

To get setup for local development of this monorepo, refer to DEVELOPMENT.md

Contributing

This is an open source project, and we welcome contributions. Please see
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 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.
Feel free to open a PR to create a document in the /proposals/ directory.
Eventually we hope to move these to a repo that serves this purpose.

Community

  • Discord Discord - Most discussion outside of github happens on our Discord Server
  • Twitter - @GraphiQL and #GraphiQL
  • GitHub - Create feature requests, discussions issues and bugs above
To the top