import { DEFAULT_SEARCH_PROPS, PAGE_PROPS_NO_NAV } from "actions"
import API from "api"
import { gql } from "apollo-boost"
import {
  mapDispatchToProps,
  propTypes as pagePropTypes,
  useBoilerplate
} from "components/Page"
import * as GraphiQLreq from "graphiql"
import "graphiql/graphiql.css"
import React from "react"
import { connect } from "react-redux"

const GraphiQL = props => {
  useBoilerplate({
    pageProps: PAGE_PROPS_NO_NAV,
    searchProps: DEFAULT_SEARCH_PROPS,
    ...props
  })

  // TODO: fix the below hack with inlined height after layout refactoring in NCI-Agency/anet#551
  return (
    <div style={{ height: "600px" }}>
      <GraphiQLreq fetcher={fetch} />
    </div>
  )

  function fetch(params) {
    const { operationName, variables } = params
    const query = gql`
      ${params.query}
    `
    return API.client.query({ operationName, query, variables })
  }
}

GraphiQL.propTypes = { ...pagePropTypes }

export default connect(null, mapDispatchToProps)(GraphiQL)

@@ -230,21 +230,16 @@
 ort 
-* as 
 GraphiQL
 req 
@@ -234,19 +234,16 @@
 GraphiQL
-req
  from %22g
@@ -361,16 +361,25 @@
 GraphiQL
+Container
  = props
@@ -661,11 +661,8 @@
 hiQL
-req
  fet
@@ -899,16 +899,25 @@
 GraphiQL
+Container
 .propTyp
@@ -1000,10 +1000,19 @@
 GraphiQL
+Container
 )%0A

Fix GraphiQL page to work with updated graphiql package