All Projects β†’ OlegIlyenko β†’ Graphiql Workspace

OlegIlyenko / Graphiql Workspace

Licence: apache-2.0
A graphical interactive in-browser GraphQL IDE enhanced with tabbed navigation, HTTP headers, arbitrary endpoints, etc.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Graphiql Workspace

Basically Fullstack Graphql
Code that aims to explain the client and the server side of using GraphQL in apps.
Stars: ✭ 199 (-4.78%)
Mutual labels:  graphql
The Road To Graphql
πŸ““The Road to GraphQL: Your journey to master pragmatic GraphQL in JavaScript
Stars: ✭ 203 (-2.87%)
Mutual labels:  graphql
Taskcafe
An open source project management tool with Kanban boards
Stars: ✭ 2,848 (+1262.68%)
Mutual labels:  graphql
Express Graphql Boilerplate
Express GraphQL API with JWT Authentication and support for sqlite, mysql, and postgresql
Stars: ✭ 201 (-3.83%)
Mutual labels:  graphql
Graphql Doctor
Prevent Breaking Changes in a GraphQL API with GitHub Checks
Stars: ✭ 203 (-2.87%)
Mutual labels:  graphql
Graphql Camara Deputados
API GraphQL com os dados da cΓ’mara de deputados do Brasil
Stars: ✭ 204 (-2.39%)
Mutual labels:  graphql
Gramps Legacy
The core data source combination engine of GrAMPS.
Stars: ✭ 198 (-5.26%)
Mutual labels:  graphql
36 Graphql Concepts
πŸ“œ 36 concepts every GraphQL developer should know.
Stars: ✭ 209 (+0%)
Mutual labels:  graphql
Reason Urql
Reason bindings for Formidable's Universal React Query Library, urql.
Stars: ✭ 203 (-2.87%)
Mutual labels:  graphql
Lighthouse
A framework for serving GraphQL from Laravel
Stars: ✭ 2,685 (+1184.69%)
Mutual labels:  graphql
Djangochannelsgraphqlws
Django Channels based WebSocket GraphQL server with Graphene-like subscriptions
Stars: ✭ 203 (-2.87%)
Mutual labels:  graphql
Django Graphql Auth
Django registration and authentication with GraphQL.
Stars: ✭ 200 (-4.31%)
Mutual labels:  graphql
Go Graphql Starter
This repository uses graph-gophers/graphql-go to build a starter web application
Stars: ✭ 204 (-2.39%)
Mutual labels:  graphql
Rails Devise Graphql
A Rails 6 boilerplate to create your next Saas product. Preloaded with graphQL, devise, JWT, CanCanCan, RailsAdmin, Rubocop, Rspec, i18n and more.
Stars: ✭ 199 (-4.78%)
Mutual labels:  graphql
Bit
A tool for component-driven application development.
Stars: ✭ 14,443 (+6810.53%)
Mutual labels:  graphql
Conventions
GraphQL Conventions Library for .NET
Stars: ✭ 198 (-5.26%)
Mutual labels:  graphql
Graphql Parser
A graphql query language and schema definition language parser and formatter for rust
Stars: ✭ 203 (-2.87%)
Mutual labels:  graphql
Absinthe plug
Plug support for Absinthe, the GraphQL toolkit for Elixir
Stars: ✭ 209 (+0%)
Mutual labels:  graphql
React Native Fullstack Graphql
πŸš€ Starter projects for mobile applications based on React Native & GraphQL.
Stars: ✭ 208 (-0.48%)
Mutual labels:  graphql
Mongoke
Instant Graphql for MongoDb (active branch is golang, rewrite in process)
Stars: ✭ 203 (-2.87%)
Mutual labels:  graphql

GraphiQL Workspace

npm version

A graphical interactive in-browser GraphQL IDE (GraphiQL), enhanced with following features:

  • Tabbed navigation
  • HTTP header editor
  • Arbitrary endpoint support
  • Workspace save/load (as JSON file)
  • Local storage support
  • Request proxy
  • Saved queries
  • Query history

You can use it in your own projects like this:

import React from 'react';
import ReactDOM from 'react-dom';
import {GraphiQLWorkspace, AppConfig} from 'graphiql-workspace';

import 'graphiql-workspace/graphiql-workspace.css'
import 'graphiql/graphiql.css'

const config = new AppConfig("graphiql", bootstrapOptions);
ReactDOM.render(<GraphiQLWorkspace config={config} />, document.getElementById('graphiql-workspace'));

You still will need to add bootstrap CSS in you final application. For instance, you can use bootstrap-loader in webpack config. For an example application, that uses graphiql-workspace, check out graphql-toolbox

Here is how it look like in your browser:

graphiql-workspace

Getting started

After you cloned the project, do the npm install and then use ./scripts/build.sh or ./scripts/quickBuild.sh to build the project.

In order to see it in action, you can use an example html page ./example/index.html.

Standalone Usage

Here is an example HTML:

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>GraphiQL Workspace Example</title>

    <link rel="stylesheet" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
    <link rel="stylesheet" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/graphiql/0.11.6/graphiql.min.css">
    <link rel="stylesheet" media="screen" href="//cdn.jsdelivr.net/npm/[email protected]/graphiql-workspace.min.css">

    <script src="//cdn.jsdelivr.net/npm/[email protected]/react.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/react-dom.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/graphiql-workspace.min.js"></script>
  </head>
  <body>
    <div id="workspace" class="graphiql-workspace"></div>

    <script>
      var config = new graphiqlWorkspace.AppConfig("graphiql", {});

      ReactDOM.render(
        React.createElement(graphiqlWorkspace.GraphiQLWorkspace, {config: config}),
        document.getElementById('workspace'));
    </script>
  </body>
</html>

Community

  • graphiql-workspace-app β€” an instance of create-react-app that wraps graphiql-workspace. Can be easily launched at graphiql.yourcompany.com as a lightweight Docker container (< 20MB). Hosted on GitLab.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].