GraphiQL.app
Trusted Mac download GraphiQL 0.5.0. Virus-free and 100% clean download. Get GraphiQL alternative downloads. GraphQL Playground. Featured Jul 05, 2018. A query language for your API. GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. Nov 11, 2017 free,'.version; GraphQL,Playground download rqE,exe 1969,download 2017. From,vpn full 1951 - GraphQL' Playground. Samsung This apps playground s 100 best ipad for kids can help you to solve the problem. GraphQL Test Playground. We will be working with a simple Movie and Actor based GraphQL API that shows some name of the movie and list of movies and actor details. I’ve developed and Open-Sourced here. Firstly, let us look at the Schema of the API that we are going to use for testing. Chrome extension for GraphQL Playground. GraphQL Playground for Chrome offered by Dustin R. Callaway (4) 4,000+ users. Chrome extension for GraphQL Playground. Exposes the awesome GraphQL Playground application as a Chrome extension. This is especially useful if your GraphQL server requires cookie credentials from a session that you.
A light, Electron-based wrapper around GraphiQL.
Provides a tabbed interface for editing and testing GraphQL queries/mutations with GraphiQL.
macOS installation
If you have Homebrew installed on macOS:
Alternately, download the binary from the Releases tab.
Linux installation
The graphiql-app uses the AppImage format for its Linux version. You download it from the Electron app directory (click the 'Download for Linux'-button) or from the Releases tab.
Either way, you will get a .AppImage
binary. Put it in a safe place and make it executable:
Then simply execute the app. It will ask whether to add shortcuts to your desktop and menus for easy access in the future.
Getting started developing
- Branch and/or clone the repo locally.
- cd into it
- install all the require packages:
npm i
- build the project:
npm run build
- start the project:
npm start
SECURITY WARNING: both graphql-playground-html
and all four (4) of it's middleware dependents until graphql-playground-html@1.6.22
were subject to an XSS Reflection attack vulnerability only to unsanitized user input strings to the functions therein. This was resolved in graphql-playground-html@^1.6.22
. More Information
Future of this repository: see the announcement issue for details.
GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration).
Installation
Features
✨ Context-aware autocompletion & error highlighting📚 Interactive, multi-column docs (keyboard support)⚡️ Supports real-time GraphQL Subscriptions⚙ GraphQL Config support with multiple Projects & Endpoints🚥 Apollo Tracing support
Security Details
NOTE: only unsanitized user input to the functions in these packages is vulnerable to the recently reported XSS Reflection attack.
Impact
Impacted are any and all unsanitized user-defined input to:-renderPlaygroundPage()
-koaPlayground()
-expressPlayground()
-koaPlayground()
-`lambdaPlayground()
If you used static values, such as graphql-playground-electron
does in it's webpack config, as well as the most common middleware implementations out there, they were not vulnerable to the attack.
The only reason this vulnerability exists is because we are using template strings in renderPlaygroundPage()
with potentially unsanitized user defined variables. This allows an attacker to inject html and javascript into the page.
Common examples may be user-defined path parameters, query string, unsanitized UI provided values in database, etc., that are used to build template strings or passed directly to a renderPlaygroundPage()
or the matching middleware function equivalent listed above.
Impacted Packages
All versions of these packages are impacted until the ones specified below, which are now safe for user defined input:
graphql-playground-html
:☔ safe @1.6.22
graphql-playground-express
☔ safe @1.7.16
graphql-playground-koa
☔ safe @1.6.15
graphql-playground-hapi
☔ safe @1.6.13
graphql-playground-lambda
☔ safe @1.7.17
graphql-playground-electron
has always been☔ safe from XSS attacks! This is because configuration is statically defined it's webpack configgraphql-playground-react
is safe because it does not userenderPlaygroundPage()
anywhere, and thus is not susceptible to template string XSS reflection attacks.
More Information
See the security docs for more details on how your implementation might be impacted by this vulnerability. It contains safe examples, unsafe examples, workarounds, and more details.
We've also provided 'an example of the xss using the express middleware
FAQ
How is this different from GraphiQL?
GraphQL Playground uses components of GraphiQL under the hood but is meant as a more powerful GraphQL IDE enabling better (local) development workflows. Compared to GraphiQL, the GraphQL Playground ships with the following additional features:
- Interactive, multi-column schema documentation
- Automatic schema reloading
- Support for GraphQL Subscriptions
- Query history
- Configuration of HTTP headers
- Tabs
See the following question for more additonal features.
What's the difference between the desktop app and the web version?
The desktop app is the same as the web version but includes these additional features:
- Partial support for graphql-config enabling features like multi-environment setups (no support for sending HTTP headers).
- Double click on
*.graphql
files.
How does GraphQL Bin work?
You can easily share your Playgrounds with others by clicking on the 'Share' button and sharing the generated link. You can think about GraphQL Bin like Pastebin for your GraphQL queries including the context (endpoint, HTTP headers, open tabs etc).
You can also find the announcement blog post here.
Settings
In the top right corner of the Playground window you can click on the settings icon.These are the settings currently available:
Usage
Properties
The React component <Playground />
and all middlewares expose the following options:
props
(Middlewares & React Component)endpoint
string
- the GraphQL endpoint url.subscriptionEndpoint
string
- the GraphQL subscriptions endpoint url.workspaceName
string
- in case you provide a GraphQL Config, you can name your workspace hereconfig
string
- the JSON of a GraphQL Config. See an example heresettings
ISettings
- Editor settings in json format as described here
schema
IntrospectionResult
- The result of an introspection query (an object of this form:{__schema: {...}}
) The playground automatically fetches the schema from the endpoint. This is only needed when you want to override the schema.tabs
Tab[]
- An array of tabs to inject. Note: When using this feature, tabs will be resetted each time the page is reloaded
In addition to this, the React app provides some more properties:
props
(React Component)createApolloLink
[(session: Session, subscriptionEndpoint?: string) => ApolloLink
] - this is the equivalent to thefetcher
of GraphiQL. For each query that is being executed, this function will be called
createApolloLink
is only available in the React Component and not the middlewares, because the content must be serializable as it is being printed into a HTML template.
As HTML Page
If you simply want to render the Playground HTML on your own, for example when implementing a GraphQL Server, there are 2 options for you:
Note: In case you do not want to serve assets from a CDN (like jsDelivr) and instead use a local copy, you will need to install graphql-playground-react
from npm, and then replace all instances of //cdn.jsdelivr.net/npm
with ./node_modules
. An example can be found here
As React Component
Install
Use
GraphQL Playground provides a React component responsible for rendering the UI and Session management.There are 3 dependencies needed in order to run the graphql-playground-react
React component.
- Open Sans and Source Code Pro fonts
- Rendering the
<Playground />
component
The GraphQL Playground requires React 16.
Including Fonts (1.
)
Including stylesheet and the component (2., 3.
)
As Server Middleware
Install
Usage with example
We have a full example for each of the frameworks below:
Express: See packages/graphql-playground-middleware-express/examples/basic
Hapi: See packages/graphql-playground-middleware-hapi
Koa: See packages/graphql-playground-middleware-koa
Lambda (as serverless handler): See serverless-graphql-apollo or a quick example below.
Download GraphQL Playground 1.8.10 - Softpedia
As serverless handler
Install
Usage
handler.js
Cached
serverless.yml
Security Issue
There is an XSS Reflection Vulnerability when using these middlewares with unsanitized user input before
Development
Openlocalhost:3000/localDev.html?endpoint=https://api.graph.cool/simple/v1/swapi for local development!
Custom Theme
From graphql-playground-react@1.7.0
on you can provide a codeTheme
property to the React Component to customize your color theme.These are the available options:
Versions
This is repository is a 'mono repo' and contains multiple packages using Yarn workspaces. Please be aware that versions are not synchronised between packages. The versions of the release page refer to the electron app.
Packages
In the folder packages
you'll find the following packages:
graphql-playground-electron
: Cross-platform electron app which usesgraphql-playground-react
graphql-playground-html
: Simple HTML page rendering a version ofgraphql-playground-react
hosted on JSDelivergraphql-playground-middleware-express
: Express middleware usinggraphql-playground-html
graphql-playground-middleware-hapi
: Hapi middleware usinggraphql-playground-html
graphql-playground-middleware-koa
: Koa middleware usinggraphql-playground-html
graphql-playground-middleware-lambda
: AWS Lambda middleware usinggraphql-playground-html
graphql-playground-react
: Core of GraphQL Playground built with ReactJS
Join our Discord Server if you run into issues or have questions. We love talking to you!