Repository files navigation

Storybook GraphQL Addon can be used to display the GraphiQL IDE with example queries inStorybook.

Framework Support

First, install the addon

yarn add @storybook/addon-graphql --dev

Import thesetupGraphiQL function and use it to create the graphiql helper with a base url.

import{storiesOf}from"@storybook/react";import{setupGraphiQL}from"@storybook/addon-graphql";// setup the graphiql helper which can be used with the add method laterconstgraphiql=setupGraphiQL({url:"http://localhost:3000/graphql"});storiesOf("GraphQL Demo",module).add("get user info",graphiql(`{    user(id: "1") {      name    }  }`));

Tip: try creating the helper in another file and import the configured graphiql helper from it

ThesetupGraphiQL function also accepts a fetcher parameter which can be used to change how graphiql gets data. If the fetcher parameter is not given, it'll create a fetcher which uses thefetch api to make requests. The above example can also be written using a custom fetcher.

import{storiesOf}from"@storybook/react";import{setupGraphiQL}from"@storybook/addon-graphql";import{url}from"./settings";constfetcher=(params)=>{constoptions={method:"post",headers:{"Content-Type":"application/json"},body:JSON.stringify(params),};returnfetch(url,options).then((res)=>res.json());};// create the helper with a custom fetcherconstgraphiql=setupGraphiQL({ fetcher});storiesOf("GraphQL Demo",module).add("get user info",graphiql(`{    user(id: "1") {      name    }  }`));

While this addon was part of theStorybook monorepo, it received commits from the following authors:

Andrew Lisowski,Armand Abric,Brody McKee,Clément DUNGLER,Daniel Duan,Dependencies.io Bot,Filipp Riabchun,Gaëtan Maisse,Grey Baker,Hypnosphi,ImgBotApp,James Hush,Jimmy Somsanith,Lynn Chyi,Michael Shilman,Michaël De Boey,Norbert de Langen,Paul Rosania,Pavan Kumar Sunkara,Rajat Rao,Renovate Bot,Roman,Varun Vachhar,igor-dv,lonyele,