Skip to content

Commit 8b9aa9d

Browse files
saihajsaihaj
committed
feat: GraphiQL 2.0
1 parent 9621b88 commit 8b9aa9d

File tree

8 files changed

+368
-779
lines changed

8 files changed

+368
-779
lines changed

‎.changeset/spotty-crews-poke.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@graphql-yoga/graphiql': major
3+
---
4+
5+
upgrade to GraphiQL v2

‎packages/graphiql/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,15 @@
2828
"vite": "3.1.3"
2929
},
3030
"dependencies": {
31+
"@graphiql/plugin-explorer": "^0.1.4",
32+
"@graphiql/toolkit": "^0.8.0",
3133
"@graphql-tools/url-loader": "7.16.2",
32-
"copy-to-clipboard": "3.3.2",
33-
"graphiql": "1.8.8",
34-
"graphiql-explorer": "0.9.0",
34+
"graphiql": "2.0.7",
3535
"graphql": "16.6.0",
36+
"json-bigint-patch": "0.0.8",
3637
"react": "18.2.0",
3738
"react-dom": "18.2.0",
38-
"use-url-search-params": "2.5.1",
39-
"json-bigint-patch": "0.0.8"
39+
"use-url-search-params": "2.5.1"
4040
},
4141
"main": "dist/yoga-graphiql.umd.js",
4242
"module": "dist/yoga-graphiql.es.js",

‎packages/graphiql/src/YogaGraphiQL.tsx‎

Lines changed: 64 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,24 @@
1-
import React, { useMemo } from 'react'
2-
import copyToClipboard from 'copy-to-clipboard'
1+
import React, { useMemo, useState } from 'react'
2+
import { useExplorerPlugin } from '@graphiql/plugin-explorer'
33
import {
44
GraphiQL,
5-
Fetcher,
5+
GraphiQLInterface,
66
GraphiQLProps,
7-
FetcherParams,
8-
FetcherOpts,
7+
GraphiQLProvider,
98
} from 'graphiql'
9+
import { Fetcher, FetcherParams, FetcherOpts } from '@graphiql/toolkit'
1010
import {
1111
LoadFromUrlOptions,
1212
SubscriptionProtocol,
1313
UrlLoader,
1414
} from '@graphql-tools/url-loader'
15-
import { DocumentNode, GraphQLSchema, Kind, parse } from 'graphql'
16-
import GraphiQLExplorer from 'graphiql-explorer'
15+
import { useUrlSearchParams } from 'use-url-search-params'
16+
import { DocumentNode, Kind, parse } from 'graphql'
1717
import 'graphiql/graphiql.css'
18+
import '@graphiql/plugin-explorer/dist/style.css'
1819
import './styles.css'
19-
import './dark-mode.css'
20-
import { YogaLogo } from './YogaLogo'
21-
import { useUrlSearchParams } from 'use-url-search-params'
2220
import 'json-bigint-patch'
21+
import { YogaLogo } from './YogaLogo'
2322

2423
const getOperationWithFragments = (
2524
document: DocumentNode,
@@ -44,18 +43,14 @@ const getOperationWithFragments = (
4443

4544
export type YogaGraphiQLProps = Omit<
4645
GraphiQLProps,
47-
| 'ref'
4846
| 'fetcher'
49-
| 'headerEditorEnabled'
50-
| 'defaultVariableEditorOpen'
51-
| 'docExplorerOpen'
47+
| 'isHeadersEditorEnabled'
48+
| 'defaultEditorToolsVisibility'
5249
| 'onToggleDocs'
53-
| 'tabs'
5450
| 'toolbar'
5551
| 'onSchemaChange'
5652
| 'query'
5753
| 'onEditQuery'
58-
| 'beforeTopBarContent'
5954
> &
6055
Partial<Omit<LoadFromUrlOptions, 'headers'>> & {
6156
title?: string
@@ -67,44 +62,48 @@ export type YogaGraphiQLProps = Omit<
6762

6863
export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
6964
const initialQuery = /* GraphQL */ `#
70-
# Welcome to ${props.title || 'Yoga GraphiQL'}
71-
#
72-
# ${
65+
# Welcome to ${props.title || 'Yoga GraphiQL'}
66+
#
67+
# ${
7368
props.title || 'Yoga GraphiQL'
7469
} is an in-browser tool for writing, validating, and
75-
# testing GraphQL queries.
76-
#
77-
# Type queries into this side of the screen, and you will see intelligent
78-
# typeaheads aware of the current GraphQL type schema and live syntax and
79-
# validation errors highlighted within the text.
80-
#
81-
# GraphQL queries typically start with a "{" character. Lines that start
82-
# with a # are ignored.
83-
#
84-
# An example GraphQL query might look like:
85-
#
86-
# {
87-
# field(arg: "value") {
88-
# subField
89-
# }
90-
# }
91-
#
92-
# Keyboard shortcuts:
93-
#
94-
# Prettify Query: Shift-Ctrl-P (or press the prettify button above)
95-
#
96-
# Merge Query: Shift-Ctrl-M (or press the merge button above)
97-
#
98-
# Run Query: Ctrl-Enter (or press the play button above)
99-
#
100-
# Auto Complete: Ctrl-Space (or just start typing)
101-
#
102-
`
70+
# testing GraphQL queries.
71+
#
72+
# Type queries into this side of the screen, and you will see intelligent
73+
# typeaheads aware of the current GraphQL type schema and live syntax and
74+
# validation errors highlighted within the text.
75+
#
76+
# GraphQL queries typically start with a "{" character. Lines that start
77+
# with a # are ignored.
78+
#
79+
# An example GraphQL query might look like:
80+
#
81+
# {
82+
# field(arg: "value") {
83+
# subField
84+
# }
85+
# }
86+
#
87+
# Keyboard shortcuts:
88+
#
89+
# Prettify Query: Shift-Ctrl-P (or press the prettify button above)
90+
#
91+
# Merge Query: Shift-Ctrl-M (or press the merge button above)
92+
#
93+
# Run Query: Ctrl-Enter (or press the play button above)
94+
#
95+
# Auto Complete: Ctrl-Space (or just start typing)
96+
#
97+
`
98+
10399
const endpoint = new URL(
104100
props.endpoint ?? location.pathname,
105101
location.href,
106102
).toString()
107-
const graphiqlRef = React.useRef<GraphiQL | null>(null)
103+
104+
const type = {
105+
query: String,
106+
}
108107

109108
const urlLoader = useMemo(() => new UrlLoader(), [])
110109

@@ -134,102 +133,35 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
134133
}
135134
}, [urlLoader, endpoint])
136135

137-
const [showExplorer, setShowExplorer] = React.useState(false)
138-
const [schema, setSchema] = React.useState<GraphQLSchema | null>(null)
139-
const types = {
140-
query: String,
141-
}
142136
const [params, setParams] = useUrlSearchParams(
143137
{
144138
query: props.defaultQuery || initialQuery,
145139
},
146-
types,
140+
type,
147141
false,
148142
)
149-
const [showDocs, setShowDocs] = React.useState(false)
143+
144+
const [query, setQuery] = useState(params.query?.toString())
145+
const explorerPlugin = useExplorerPlugin({
146+
query,
147+
onEdit: setQuery,
148+
})
150149

151150
return (
152151
<div className="graphiql-container">
153-
{schema && params?.query != null ? (
154-
<GraphiQLExplorer
155-
schema={schema}
156-
query={params.query.toString()}
157-
onEdit={(query: string) => {
158-
setParams({
159-
query,
160-
})
161-
}}
162-
explorerIsOpen={showExplorer}
163-
onToggleExplorer={() => setShowExplorer((isOpen) => !isOpen)}
164-
colors={{
165-
keyword: '#ff6d5d',
166-
def: '#9f51d9', // OperationName, FragmentName
167-
property: '#0083c7', // FieldName
168-
qualifier: '#008aed', // FieldAlias
169-
attribute: '#00b8ff', // ArgumentName and ObjectFieldName
170-
number: '#97b1aa', // type number
171-
string: '#00917d', // type String
172-
string2: '#146574', // Enum
173-
builtin: '#da8aff', // Boolean
174-
variable: '#ff6d5d',
175-
atom: '#ff9f4c', // Type
176-
}}
177-
/>
178-
) : null}
179-
{params?.query != null ? (
180-
<GraphiQL
181-
ref={graphiqlRef}
182-
fetcher={fetcher}
183-
headerEditorEnabled={true}
184-
defaultVariableEditorOpen={true}
185-
docExplorerOpen={showDocs}
186-
onToggleDocs={() => setShowDocs((isOpen) => !isOpen)}
187-
tabs
188-
toolbar={{
189-
additionalContent: (
190-
<>
191-
<button
192-
className="toolbar-button"
193-
onClick={() => {
194-
const state = graphiqlRef.current?.state
195-
196-
copyToClipboard(
197-
urlLoader.prepareGETUrl({
198-
baseUrl: window.location.href,
199-
query: state?.query || '',
200-
variables: state?.variables,
201-
operationName: state?.operationName,
202-
}),
203-
)
204-
}}
205-
>
206-
Copy Link
207-
</button>
208-
</>
209-
),
210-
}}
211-
onSchemaChange={(schema) => {
212-
setSchema(schema)
213-
}}
214-
query={params.query.toString()}
152+
<GraphiQLProvider
153+
plugins={[explorerPlugin]}
154+
query={query}
155+
fetcher={fetcher}
156+
>
157+
<GraphiQLInterface
158+
isHeadersEditorEnabled
159+
defaultEditorToolsVisibility
215160
onEditQuery={(query) =>
216161
setParams({
217162
query,
218163
})
219164
}
220-
beforeTopBarContent={
221-
schema ? (
222-
showExplorer ? null : (
223-
<button
224-
className="docExplorerShow docExplorerShowReverse"
225-
onClick={() => setShowExplorer((isOpen) => !isOpen)}
226-
>
227-
Explorer
228-
</button>
229-
)
230-
) : null
231-
}
232-
{...props}
233165
>
234166
<GraphiQL.Logo>
235167
<div style={{ display: 'flex', alignItems: 'center' }}>
@@ -249,8 +181,8 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
249181
</span>
250182
</div>
251183
</GraphiQL.Logo>
252-
</GraphiQL>
253-
) : null}
184+
</GraphiQLInterface>
185+
</GraphiQLProvider>
254186
</div>
255187
)
256188
}

0 commit comments

Comments
 (0)