Gatsby Theme Graphql Components

components for showing and updating graphql code in gatsby themes

Install

yarn add gatsby-graphql-components

Usage

import { Code, LiveGraphql } from 'gatsby-graphql-components';

import 'gatsby-graphql-components/prism.css';

Code Component:

<Code
code={'import React from 'react';
  import { Code, LiveGraphql } from 'gatsby-graphql-components'

  function App() {
    return (
      <div className="App">
        <header className="App-header">
        <Code
        code=''
        />

        </header>
      </div>
    );
  }

  export default App;'}
  />

LiveGraphql Component:

<LiveGraphql
  query={query} // initial query
  updateQuery={updateQuery} // callback function to update query
  src={'http://localhost:8000/___graphql?query='} // src url for graphiql, should include initial query
/>