Skip to content

Commit ebd952e

Browse files
ardatanardatan
committed
Go
1 parent 3b9c751 commit ebd952e

File tree

7 files changed

+260
-394
lines changed

7 files changed

+260
-394
lines changed

‎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/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,10 @@
3333
"start": "vite"
3434
},
3535
"dependencies": {
36-
"@graphiql/plugin-explorer": "^5.0.0",
36+
"@graphiql/plugin-explorer": "5.1.1",
3737
"@graphiql/toolkit": "0.11.3",
38-
"@graphql-tools/url-loader": "^8.0.15",
39-
"graphiql": "3.1.1",
38+
"@graphql-tools/url-loader": "8.0.33",
39+
"graphiql": "5.2.0",
4040
"graphql": "16.11.0",
4141
"json-bigint-patch": "0.0.8",
4242
"react": "19.1.0",

‎packages/graphiql/src/YogaGraphiQL.tsx

Lines changed: 45 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +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';
9+
import React, { useMemo } from 'react';
1010
import { useUrlSearchParams } from 'use-url-search-params';
1111
import { YogaLogo } from './YogaLogo';
1212
import './styles.css';
@@ -134,73 +134,60 @@ export function YogaGraphiQL(props: YogaGraphiQLProps): React.ReactElement {
134134
false,
135135
);
136136

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-
}
148-
149141
return (
150142
<div className="graphiql-container">
151-
<GraphiQLProvider
143+
<GraphiQL
152144
// default values that can be override by props
153145
shouldPersistHeaders
154146
plugins={[explorer]}
155147
schemaDescription={true}
156148
inputValueDeprecation={true}
157-
query={query}
149+
isHeadersEditorEnabled
150+
defaultEditorToolsVisibility
151+
initialQuery={params['query']?.toString()}
152+
onEditQuery={(query, ast) => {
153+
setParams({
154+
query,
155+
});
156+
props.onEditQuery?.(query, ast);
157+
}}
158158
{...props}
159159
fetcher={fetcher}
160160
>
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>
161+
<GraphiQL.Logo>
162+
<div style={{ display: 'flex', alignItems: 'center' }}>
163+
{typeof props?.logo === 'string' ? (
164+
// if the logo is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
165+
<div
166+
style={{ width: 40, display: 'flex' }}
167+
dangerouslySetInnerHTML={{ __html: props.logo }}
168+
/>
169+
) : (
170+
// otherwise, it's used inside react and we can render it as a component
171+
<div style={{ width: 40, display: 'flex' }}>{props?.logo || <YogaLogo />}</div>
172+
)}
173+
{typeof props?.title === 'string' ? (
174+
// if the title is a string, then it's coming when rendering graphiql as a static page (see render-graphiql)
175+
<span dangerouslySetInnerHTML={{ __html: props.title }} />
176+
) : (
177+
// otherwise, it's used inside react and we can render it as a component
178+
<span>
179+
{props?.title || (
180+
<>
181+
Yoga Graph
182+
<em>i</em>
183+
QL
184+
</>
185+
)}
186+
</span>
187+
)}
188+
</div>
189+
</GraphiQL.Logo>
190+
</GraphiQL>
204191
</div>
205192
);
206193
}

‎packages/graphql-yoga/__integration-tests__/browser.spec.ts

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,14 @@ import { setTimeout as setTimeout$ } from 'node:timers/promises';
2222
// eslint-disable-next-line
2323
import { Browser, chromium, ElementHandle, Page } from 'playwright';
2424
import { fakePromise } from '@whatwg-node/server';
25-
import { CORSOptions, createSchema, createYoga, GraphiQLOptions, Repeater } from '../src/index.js';
25+
import {
26+
ansiCodes,
27+
CORSOptions,
28+
createSchema,
29+
createYoga,
30+
GraphiQLOptions,
31+
Repeater,
32+
} from '../src/index.js';
2633

2734
let resolveOnReturn: VoidFunction;
2835
const timeoutsSignal = new AbortController();
@@ -251,12 +258,31 @@ describe('browser', () => {
251258
let port: number;
252259
const server = createServer(yogaApp);
253260

261+
function wrapColor(msg: string, color?: string) {
262+
if (color != null && color in ansiCodes) {
263+
return `${ansiCodes[color as keyof typeof ansiCodes]}${msg}${ansiCodes.reset}`;
264+
}
265+
return msg;
266+
}
267+
254268
beforeAll(async () => {
255269
await new Promise<void>(resolve => server.listen(0, resolve));
256270
port = (server.address() as AddressInfo).port;
257271
browser = await chromium.launch({
258272
headless: process.env['PLAYWRIGHT_HEADLESS'] !== 'false',
259273
args: ['--incognito', '--no-sandbox', '--disable-setuid-sandbox'],
274+
logger: {
275+
isEnabled(_name: string) {
276+
return true;
277+
},
278+
log(name, severity, message, args, hints) {
279+
if (severity === 'error') {
280+
console.error(wrapColor(`[${name}] ${message}`, hints.color), ...args);
281+
} else {
282+
console.log(wrapColor(`[${name}] ${message}`), ...args);
283+
}
284+
},
285+
},
260286
});
261287
});
262288
beforeEach(async () => {

‎packages/logger/src/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable @typescript-eslint/no-explicit-any */
22
/* eslint-disable no-console */
33

4-
const ansiCodes = {
4+
export const ansiCodes = {
55
red: '\x1b[31m',
66
yellow: '\x1b[33m',
77
magenta: '\x1b[35m',

‎patches/@graphiql__react@0.20.4.patch

Lines changed: 0 additions & 22 deletions
This file was deleted.

0 commit comments

Comments
 (0)