Skip to content

Commit 7f26c64

Browse files
renovate[bot]github-actions[bot]ardatan
authored
Update and Fix GraphiQL (#4033)
* fix(deps): update dependency @graphiql/plugin-explorer to v5 chore(dependencies): updated changesets for modified dependencies Go Lets go chore(dependencies): updated changesets for modified dependencies More Lets go Fix lockfile Fix Fix .. Fix Muldur muldur * chore(dependencies): updated changesets for modified dependencies * Fix * lets go * Try again * lets go * Fix fix fix --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Arda TANRIKULU <ardatanrikulu@gmail.com>
1 parent ed285a7 commit 7f26c64

File tree

16 files changed

+431
-457
lines changed

16 files changed

+431
-457
lines changed

‎.changeset/@graphql-yoga_graphiql-4033-dependencies.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@graphql-yoga/graphiql": patch
3+
---
4+
dependencies updates:
5+
- Updated dependency [`@graphiql/plugin-explorer@5.1.1` ↗︎](https://www.npmjs.com/package/@graphiql/plugin-explorer/v/5.1.1) (from `3.2.6`, in `dependencies`)
6+
- Updated dependency [`graphiql@5.2.0` ↗︎](https://www.npmjs.com/package/graphiql/v/5.2.0) (from `3.1.1`, in `dependencies`)
7+
- Removed dependency [`use-url-search-params@2.5.1` ↗︎](https://www.npmjs.com/package/use-url-search-params/v/2.5.1) (from `dependencies`)

‎.changeset/plain-places-add.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
---
22
'@graphql-yoga/graphiql': patch
3+
'@graphql-yoga/render-graphiql': patch
34
'graphql-yoga': patch
45
---
56

‎examples/nextjs-app/__integration-tests__/nextjs-app.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ describe('nextjs 13 App Router', () => {
3030
});
3131

3232
expect(response.ok).toBe(true);
33-
expect(await response.text()).toContain('<title>Yoga GraphiQL</title>');
33+
expect(await response.text()).toContain('Yoga GraphiQL');
3434
});
3535

3636
it('should run basic query', async () => {

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,6 @@
101101
"pnpm": {
102102
"patchedDependencies": {
103103
"@changesets/assemble-release-plan@5.2.3": "patches/@changesets__assemble-release-plan@5.2.3.patch",
104-
"@graphiql/react@0.20.4": "patches/@graphiql__react@0.20.4.patch",
105104
"jest-leak-detector": "patches/jest-leak-detector.patch"
106105
},
107106
"overrides": {

‎packages/graphiql/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>YogaGraphiQL Dev</title>
77
<link
88
rel="icon"
9-
href="https://raw.githubusercontent.com/graphql-hive/graphql-yoga/main/website/public/favicon.ico"
9+
href="https://raw.githubusercontent.com/graphql-hive/graphql-yoga/refs/heads/main/website/src/app/favicon.ico"
1010
/>
1111
</head>
1212
<body id="body" class="no-focus-outline">

‎packages/graphiql/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,22 @@
3333
"start": "vite"
3434
},
3535
"dependencies": {
36-
"@graphiql/plugin-explorer": "3.2.6",
36+
"@graphiql/plugin-explorer": "5.1.1",
3737
"@graphiql/toolkit": "0.11.3",
3838
"@graphql-tools/url-loader": "9.0.0",
39-
"graphiql": "3.1.1",
39+
"graphiql": "5.2.0",
4040
"graphql": "16.11.0",
4141
"json-bigint-patch": "0.0.8",
4242
"react": "19.1.1",
4343
"react-dom": "19.1.1",
44-
"tslib": "2.8.1",
45-
"use-url-search-params": "2.5.1"
44+
"tslib": "2.8.1"
4645
},
4746
"devDependencies": {
4847
"@types/react": "19.1.12",
4948
"@types/react-dom": "19.1.9",
5049
"@vitejs/plugin-react": "5.0.2",
51-
"vite": "7.1.4"
50+
"vite": "7.1.4",
51+
"vite-plugin-monaco-editor": "1.1.0"
5252
},
5353
"sideEffects": false,
5454
"bob": false

‎packages/graphiql/src/YogaGraphiQL.tsx‎

Lines changed: 69 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1+
import 'graphiql/style.css';
2+
import '@graphiql/plugin-explorer/style.css';
3+
import { GraphiQL, GraphiQLProps } from 'graphiql';
4+
import { DocumentNode, Kind, parse } from 'graphql';
15
import { explorerPlugin } from '@graphiql/plugin-explorer';
2-
import '@graphiql/plugin-explorer/dist/style.css';
3-
import { GraphiQL, GraphiQLInterface, GraphiQLProps, GraphiQLProvider } from 'graphiql';
46
import { Fetcher, FetcherOpts, FetcherParams } from '@graphiql/toolkit';
57
import { LoadFromUrlOptions, SubscriptionProtocol, UrlLoader } from '@graphql-tools/url-loader';
6-
import 'graphiql/graphiql.css';
7-
import { DocumentNode, Kind, parse } from 'graphql';
88
import 'json-bigint-patch';
9-
import React, { useMemo, useState } from 'react';
10-
import { useUrlSearchParams } from 'use-url-search-params';
9+
import React, { useMemo } from 'react';
1110
import { YogaLogo } from './YogaLogo';
1211
import './styles.css';
1312

@@ -43,6 +42,19 @@ export type YogaGraphiQLProps = Partial<GraphiQLProps> &
4342
* Extra headers you always want to pass with users' headers input
4443
*/
4544
additionalHeaders?: LoadFromUrlOptions['headers'];
45+
46+
/**
47+
* @deprecated Use `initialQuery` instead.
48+
*/
49+
query?: GraphiQLProps['initialQuery'];
50+
/**
51+
* @deprecated Use `initialHeaders` instead.
52+
*/
53+
headers?: GraphiQLProps['initialHeaders'];
54+
/**
55+
* @deprecated Use `initialVariables` instead.
56+
*/
57+
variables?: GraphiQLProps['initialVariables'];
4658
};
4759

4860
export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
@@ -81,10 +93,6 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
8193

8294
const endpoint = new URL(props.endpoint ?? location.pathname, location.href).toString();
8395

84-
const type = {
85-
query: String,
86-
};
87-
8896
const urlLoader = useMemo(() => new UrlLoader(), []);
8997

9098
const fetcher = useMemo(() => {
@@ -126,81 +134,71 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
126134
};
127135
}, [urlLoader, endpoint, props.fetcher]) as Fetcher;
128136

129-
const [params, setParams] = useUrlSearchParams(
130-
{
131-
query: props.defaultQuery || initialQuery,
132-
},
133-
type,
134-
false,
135-
);
136-
137-
const [query, setQuery] = useState(params['query']?.toString());
138137
const explorer = explorerPlugin({
139138
showAttribution: true,
140139
});
141140

142-
if (props.query && !props.onEditQuery) {
143-
// eslint-disable-next-line no-console
144-
console.warn(
145-
'If you provide `query` prop, you should also provide `onEditQuery` prop to handle query changes.',
146-
);
147-
}
141+
const currentUrl = new URL(location.href);
142+
const initialQueryFromUrl = currentUrl.searchParams.get('query') || props.query || initialQuery;
143+
144+
const {
145+
query: deprecatedInitialQuery = initialQueryFromUrl,
146+
headers: deprecatedInitialHeaders,
147+
variables: deprecatedInitialVariables,
148+
...otherProps
149+
} = props;
148150

149151
return (
150152
<div className="graphiql-container">
151-
<GraphiQLProvider
153+
<GraphiQL
152154
// default values that can be override by props
153155
shouldPersistHeaders
154156
plugins={[explorer]}
155157
schemaDescription={true}
156158
inputValueDeprecation={true}
157-
query={query}
158-
{...props}
159+
isHeadersEditorEnabled
160+
defaultEditorToolsVisibility
161+
initialQuery={deprecatedInitialQuery}
162+
defaultHeaders={deprecatedInitialHeaders}
163+
initialVariables={deprecatedInitialVariables}
164+
onEditQuery={(query, ast) => {
165+
currentUrl.searchParams.set('query', query);
166+
history.replaceState({}, '', currentUrl);
167+
props.onEditQuery?.(query, ast);
168+
}}
169+
{...otherProps}
159170
fetcher={fetcher}
160171
>
161-
<GraphiQLInterface
162-
isHeadersEditorEnabled
163-
defaultEditorToolsVisibility
164-
{...props}
165-
onEditQuery={(query, ast) => {
166-
setParams({
167-
query,
168-
});
169-
setQuery(query);
170-
props.onEditQuery?.(query, ast);
171-
}}
172-
>
173-
<GraphiQL.Logo>
174-
<div style={{ display: 'flex', alignItems: 'center' }}>
175-
{typeof props?.logo === 'string' ? (
176-
// if the logo is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
177-
<div
178-
style={{ width: 40, display: 'flex' }}
179-
dangerouslySetInnerHTML={{ __html: props.logo }}
180-
/>
181-
) : (
182-
// otherwise, it's used inside react and we can render it as a component
183-
<div style={{ width: 40, display: 'flex' }}>{props?.logo || <YogaLogo />}</div>
184-
)}
185-
{typeof props?.title === 'string' ? (
186-
// if the title is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
187-
<span dangerouslySetInnerHTML={{ __html: props.title }} />
188-
) : (
189-
// otherwise, it's used inside react and we can render it as a component
190-
<span>
191-
{props?.title || (
192-
<>
193-
Yoga Graph
194-
<em>i</em>
195-
QL
196-
</>
197-
)}
198-
</span>
199-
)}
200-
</div>
201-
</GraphiQL.Logo>
202-
</GraphiQLInterface>
203-
</GraphiQLProvider>
172+
<GraphiQL.Logo>
173+
<div style={{ display: 'flex', alignItems: 'center' }}>
174+
{typeof props?.logo === 'string' ? (
175+
// if the logo is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
176+
<div
177+
style={{ width: 40, display: 'flex' }}
178+
dangerouslySetInnerHTML={{ __html: props.logo }}
179+
/>
180+
) : (
181+
// otherwise, it's used inside react and we can render it as a component
182+
<div style={{ width: 40, display: 'flex' }}>{props?.logo || <YogaLogo />}</div>
183+
)}
184+
{typeof props?.title === 'string' ? (
185+
// if the title is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
186+
<span dangerouslySetInnerHTML={{ __html: props.title }} />
187+
) : (
188+
// otherwise, it's used inside react and we can render it as a component
189+
<span>
190+
{props?.title || (
191+
<>
192+
Yoga Graph
193+
<em>i</em>
194+
QL
195+
</>
196+
)}
197+
</span>
198+
)}
199+
</div>
200+
</GraphiQL.Logo>
201+
</GraphiQL>
204202
</div>
205203
);
206204
}

‎packages/graphiql/vite.config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import { execSync } from 'node:child_process';
22
import * as path from 'node:path';
33
import { defineConfig } from 'vite';
4+
import $monacoEditorPlugin from 'vite-plugin-monaco-editor';
45

56
const pnpmStoreDir = execSync('pnpm store path').toString('utf-8').trim();
67

8+
const monacoEditorPlugin: typeof $monacoEditorPlugin =
9+
// @ts-expect-error - We need to do this because the plugin is a CJS module
10+
$monacoEditorPlugin.default ?? $monacoEditorPlugin;
11+
712
// https://vitejs.dev/config/
813
export default defineConfig({
914
cacheDir: path.join(pnpmStoreDir, '.vite'),
@@ -15,6 +20,15 @@ export default defineConfig({
1520
// fastRefresh: false,
1621
}),
1722
),
23+
monacoEditorPlugin({
24+
languageWorkers: ['editorWorkerService', 'json'],
25+
customWorkers: [
26+
{
27+
label: 'graphql',
28+
entry: 'monaco-graphql/esm/graphql.worker.js',
29+
},
30+
],
31+
}),
1832
],
1933
server: {
2034
port: 4001,

0 commit comments

Comments
 (0)