Merge pull request #6 from edgeandnode/piotr/default-query-prop

Add defaultQuery prop
edgeandnode · Sep 22, 2022 · 4651f3c · 4651f3c
2 parents 591a75d + ef9ebe1
commit 4651f3c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@edgeandnode/graphiql-playground",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "type": "module",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,28 +1,20 @@
-import { useExplorerPlugin } from "@graphiql/plugin-explorer";
-import { GraphiQLProvider } from "@graphiql/react";
-import {
-  type Storage as GraphiQLStorage,
-  CreateFetcherOptions,
-  createGraphiQLFetcher,
-} from "@graphiql/toolkit";
-import { ReactNode, useEffect, useState } from "react";
+import { useExplorerPlugin } from '@graphiql/plugin-explorer'
+import { GraphiQLProvider } from '@graphiql/react'
+import { type Storage as GraphiQLStorage, CreateFetcherOptions, createGraphiQLFetcher } from '@graphiql/toolkit'
+import { ReactNode, useEffect, useState } from 'react'
 
-import { SavedQuery } from "./SavedQueriesToolbar/types";
-import { GraphiQLInterface, GraphiQLToolbar } from "./GraphiQLInterface";
-import {
-  SavedQueriesContext,
-  SavedQueriesContextProvider,
-  SavedQueriesToolbar,
-} from "./SavedQueriesToolbar";
+import { SavedQuery } from './SavedQueriesToolbar/types'
+import { GraphiQLInterface, GraphiQLToolbar } from './GraphiQLInterface'
+import { SavedQueriesContext, SavedQueriesContextProvider, SavedQueriesToolbar } from './SavedQueriesToolbar'
 
-import "@graphiql/react/font/fira-code.css";
-import "@graphiql/plugin-explorer/dist/style.css";
+import '@graphiql/react/font/fira-code.css'
+import '@graphiql/plugin-explorer/dist/style.css'
 //
 // TODO: Should those two be merged?
-import "./graphiql-styles.css";
-import "./style-overrides.css";
-import "./graphiql-react-properties.css";
-import "./syntax-highlighting.css";
+import './graphiql-styles.css'
+import './style-overrides.css'
+import './graphiql-react-properties.css'
+import './syntax-highlighting.css'
 
 // Temporary?
 const TOOLBAR_HIDDEN = (
@@ -31,17 +23,19 @@ const TOOLBAR_HIDDEN = (
     {/* Toolbar button tooltips are currently broken because of our global styles. */}
     {/* Toolbar actions keyboard shortcuts don't work. */}
   </GraphiQLToolbar>
-);
+)
 
 /**
  * @see https://graphiql-test.netlify.app/typedoc/modules/graphiql.html#graphiqlprops
  */
 export interface GraphProtocolGraphiQLProps<TQuery extends SavedQuery>
-  extends Pick<SavedQueriesContext<TQuery>, "queries" | "currentQueryId"> {
-  fetcher: GraphProtocolGraphiQL.FetcherOptions;
-  storage?: GraphiQLStorage;
+  extends Pick<SavedQueriesContext<TQuery>, 'queries' | 'currentQueryId'> {
+  fetcher: GraphProtocolGraphiQL.FetcherOptions
+  storage?: GraphiQLStorage
+  /** used for initial state if ther eare no savedQueries  */
+  defaultQuery?: string
   /** slot for GraphProtocolGraphiQL.SavedQueriesToolbar */
-  header: ReactNode;
+  header: ReactNode
 }
 
 export function GraphProtocolGraphiQL<TQuery extends SavedQuery>({
@@ -50,35 +44,28 @@ export function GraphProtocolGraphiQL<TQuery extends SavedQuery>({
   header,
   currentQueryId,
   queries,
+  defaultQuery = '',
 }: GraphProtocolGraphiQLProps<TQuery>) {
-  const [fetcher] = useState(() => createGraphiQLFetcher(fetcherOptions));
-  const currentSavedQuery = queries.find(
-    (query) => query.id === currentQueryId
-  );
+  const [fetcher] = useState(() => createGraphiQLFetcher(fetcherOptions))
+  const currentSavedQuery = queries.find((query) => query.id === currentQueryId)
 
-  const [querySource, setQuerySource] = useState(
-    currentSavedQuery?.query || ""
-  );
+  const [querySource, setQuerySource] = useState(currentSavedQuery?.query || defaultQuery)
 
   // Whenever currentQueryId changes, we update the text in CodeMirror.
   useEffect(() => {
-    setQuerySource(currentSavedQuery?.query || "");
+    if (currentQueryId) setQuerySource(currentSavedQuery?.query || '')
+    // We don't refresh the editor on changes to currentSavedQuery.query,
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentQueryId]);
+  }, [currentQueryId])
 
   const explorerPlugin = useExplorerPlugin({
     query: querySource,
     onEdit: setQuerySource,
     storage,
-  });
+  })
 
   return (
-    <GraphiQLProvider
-      fetcher={fetcher}
-      query={querySource}
-      storage={storage}
-      plugins={[explorerPlugin]}
-    >
+    <GraphiQLProvider fetcher={fetcher} query={querySource} storage={storage} plugins={[explorerPlugin]}>
       <SavedQueriesContextProvider<TQuery>
         value={{
           currentQueryId,
@@ -98,14 +85,14 @@ export function GraphProtocolGraphiQL<TQuery extends SavedQuery>({
         </GraphiQLInterface>
       </SavedQueriesContextProvider>
     </GraphiQLProvider>
-  );
+  )
 }
 
-GraphProtocolGraphiQL.SavedQueriesToolbar = SavedQueriesToolbar;
+GraphProtocolGraphiQL.SavedQueriesToolbar = SavedQueriesToolbar
 
 export declare namespace GraphProtocolGraphiQL {
   export interface FetcherOptions extends CreateFetcherOptions {}
   export interface Storage extends GraphiQLStorage {}
 }
 
-export * from "./SavedQueriesToolbar/types";
+export * from './SavedQueriesToolbar/types'