Skip to content

Commit 2dc4fd2

Browse files
mskorokhodovmskorokhodov
committed
fix: to load schema using url loader as well
1 parent 978ee50 commit 2dc4fd2

File tree

7 files changed

+44
-108
lines changed

7 files changed

+44
-108
lines changed

‎packages/libraries/laboratory/src/components/laboratory/laboratory.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -402,7 +402,7 @@ const LaboratoryContent = () => {
402402
>
403403
Preflight Script
404404
</DropdownMenuItem>
405-
{/* <DropdownMenuSeparator />
405+
<DropdownMenuSeparator />
406406
<DropdownMenuItem
407407
onSelect={() => {
408408
const tab =
@@ -416,7 +416,7 @@ const LaboratoryContent = () => {
416416
}}
417417
>
418418
Settings
419-
</DropdownMenuItem> */}
419+
</DropdownMenuItem>
420420
</DropdownMenuContent>
421421
</DropdownMenu>
422422
<TooltipContent side="right">Settings</TooltipContent>

‎packages/libraries/laboratory/src/components/laboratory/operation.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -392,7 +392,7 @@ export const Response = ({ historyItem }: { historyItem?: LaboratoryHistoryReque
392392
)}
393393
{historyItem ? (
394394
<div className="ml-auto flex items-center gap-2">
395-
{historyItem?.status && (
395+
{!!historyItem?.status && (
396396
<Badge
397397
className={cn('bg-green-400/10 text-green-500', {
398398
'bg-red-400/10 text-red-500': isError,
@@ -537,9 +537,12 @@ export const Query = (props: {
537537
return;
538538
}
539539

540-
const extensionsResponse = response.extensions?.response as {
540+
const extensionsResponse = (response.extensions?.response as {
541541
status: number;
542542
headers: Record<string, string>;
543+
}) ?? {
544+
status: 0,
545+
headers: {},
543546
};
544547

545548
delete response.extensions?.request;

‎packages/libraries/laboratory/src/components/laboratory/settings.tsx‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ const settingsFormSchema = z.object({
1818
protocol: z.enum(['SSE', 'GRAPHQL_SSE', 'WS', 'LEGACY_WS']),
1919
}),
2020
introspection: z.object({
21-
queryName: z.string().optional(),
2221
method: z.enum(['GET', 'POST']).optional(),
2322
schemaDescription: z.boolean().optional(),
2423
}),
@@ -183,20 +182,6 @@ export const Settings = () => {
183182
</CardHeader>
184183
<CardContent>
185184
<FieldGroup>
186-
<form.Field name="introspection.queryName">
187-
{field => {
188-
return (
189-
<Field>
190-
<FieldLabel htmlFor={field.name}>Query name</FieldLabel>
191-
<Input
192-
name={field.name}
193-
value={field.state.value ?? ''}
194-
onChange={e => field.handleChange(e.target.value || undefined)}
195-
/>
196-
</Field>
197-
);
198-
}}
199-
</form.Field>
200185
<form.Field name="introspection.method">
201186
{field => {
202187
const isInvalid = field.state.meta.isTouched && !field.state.meta.isValid;

‎packages/libraries/laboratory/src/lib/endpoint.ts‎

Lines changed: 34 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { useCallback, useEffect, useMemo, useState } from 'react';
22
import {
33
buildClientSchema,
4-
getIntrospectionQuery,
54
GraphQLSchema,
5+
introspectionFromSchema,
66
type IntrospectionQuery,
77
} from 'graphql';
88
import { toast } from 'sonner';
9-
import z from 'zod';
9+
// import z from 'zod';
1010
import { asyncInterval } from '@/lib/utils';
11-
import { createRequestSignal } from './request';
11+
import { SubscriptionProtocol, UrlLoader } from '@graphql-tools/url-loader';
1212
import type { LaboratorySettingsActions, LaboratorySettingsState } from './settings';
1313

1414
export interface LaboratoryEndpointState {
@@ -24,31 +24,6 @@ export interface LaboratoryEndpointActions {
2424
restoreDefaultEndpoint: () => void;
2525
}
2626

27-
function buildIntrospectionRequest(
28-
queryName?: string,
29-
method?: 'GET' | 'POST',
30-
schemaDescription?: boolean,
31-
) {
32-
const query = getIntrospectionQuery({
33-
schemaDescription,
34-
}).replace('query IntrospectionQuery', `query ${queryName ?? 'IntrospectionQuery'}`);
35-
36-
return {
37-
method,
38-
query,
39-
} as const;
40-
}
41-
42-
const GraphQLResponseErrorSchema = z
43-
.object({
44-
errors: z.array(
45-
z.object({
46-
message: z.string(),
47-
}),
48-
),
49-
})
50-
.strict();
51-
5227
export const useEndpoint = (props: {
5328
defaultEndpoint?: string | null;
5429
onEndpointChange?: (endpoint: string | null) => void;
@@ -70,6 +45,8 @@ export const useEndpoint = (props: {
7045
return introspection ? buildClientSchema(introspection) : null;
7146
}, [introspection]);
7247

48+
const loader = useMemo(() => new UrlLoader(), []);
49+
7350
const fetchSchema = useCallback(
7451
async (signal?: AbortSignal) => {
7552
if (endpoint === props.defaultEndpoint && props.defaultSchemaIntrospection) {
@@ -83,53 +60,39 @@ export const useEndpoint = (props: {
8360
}
8461

8562
try {
86-
const introspectionRequest = buildIntrospectionRequest(
87-
props.settingsApi?.settings.introspection.queryName,
88-
props.settingsApi?.settings.introspection.method,
89-
props.settingsApi?.settings.introspection.schemaDescription,
90-
);
91-
92-
const requestSignal = createRequestSignal(
93-
signal,
94-
props.settingsApi?.settings.fetch.timeout,
95-
);
96-
const requestUrl =
97-
introspectionRequest.method === 'GET'
98-
? (() => {
99-
const url = new URL(endpoint);
100-
url.searchParams.set('query', introspectionRequest.query);
101-
return url.toString();
102-
})()
103-
: endpoint;
104-
105-
const response = await fetch(requestUrl, {
106-
signal: requestSignal,
107-
method: introspectionRequest.method,
108-
body:
109-
introspectionRequest.method === 'POST'
110-
? JSON.stringify({
111-
query: introspectionRequest.query,
112-
})
113-
: undefined,
114-
headers:
115-
introspectionRequest.method === 'POST'
116-
? {
117-
'Content-Type': 'application/json',
118-
}
119-
: undefined,
120-
}).then(r => r.json());
121-
122-
const parsedResponse = GraphQLResponseErrorSchema.safeParse(response);
123-
124-
if (parsedResponse.success) {
125-
throw new Error(parsedResponse.data.errors.map(e => e.message).join('\n'));
63+
console.log('fetching schema');
64+
65+
const result = await loader.load(endpoint, {
66+
subscriptionsEndpoint: endpoint,
67+
subscriptionsProtocol:
68+
(props.settingsApi?.settings.subscriptions.protocol as SubscriptionProtocol) ??
69+
SubscriptionProtocol.GRAPHQL_SSE,
70+
credentials: props.settingsApi?.settings.fetch.credentials,
71+
specifiedByUrl: true,
72+
directiveIsRepeatable: true,
73+
inputValueDeprecation: true,
74+
retry: props.settingsApi?.settings.fetch.retry,
75+
timeout: props.settingsApi?.settings.fetch.timeout,
76+
useGETForQueries: props.settingsApi?.settings.fetch.useGETForQueries,
77+
exposeHTTPDetailsInExtensions: true,
78+
descriptions: props.settingsApi?.settings.introspection.schemaDescription ?? false,
79+
method: props.settingsApi?.settings.introspection.method ?? 'POST',
80+
fetch: (input: string | URL | Request, init?: RequestInit) =>
81+
fetch(input, {
82+
...init,
83+
signal,
84+
}),
85+
});
86+
87+
if (result.length === 0) {
88+
throw new Error('Failed to fetch schema');
12689
}
12790

128-
if (response.error && typeof response.error === 'string') {
129-
throw new Error(response.error);
91+
if (!result[0].schema) {
92+
throw new Error('Failed to fetch schema');
13093
}
13194

132-
setIntrospection(response.data as IntrospectionQuery);
95+
setIntrospection(introspectionFromSchema(result[0].schema));
13396
} catch (error: unknown) {
13497
if (
13598
error &&
@@ -150,7 +113,6 @@ export const useEndpoint = (props: {
150113
[
151114
endpoint,
152115
props.settingsApi?.settings.fetch.timeout,
153-
props.settingsApi?.settings.introspection.queryName,
154116
props.settingsApi?.settings.introspection.method,
155117
props.settingsApi?.settings.introspection.schemaDescription,
156118
],

‎packages/libraries/laboratory/src/lib/operations.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,9 @@ export const useOperations = (
474474
return null;
475475
}
476476

477-
delete response.extensions.response.body;
477+
if (response.extensions?.response?.body) {
478+
delete response.extensions.response.body;
479+
}
478480

479481
setStopOperationsFunctions(prev => {
480482
const newStopOperationsFunctions = { ...prev };

‎packages/libraries/laboratory/src/lib/request.ts‎

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

‎packages/libraries/laboratory/src/lib/settings.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ export type LaboratorySettings = {
1111
protocol: 'SSE' | 'GRAPHQL_SSE' | 'WS' | 'LEGACY_WS';
1212
};
1313
introspection: {
14-
queryName?: string;
1514
method?: 'GET' | 'POST';
1615
schemaDescription?: boolean;
1716
};
@@ -28,7 +27,6 @@ export const defaultLaboratorySettings: LaboratorySettings = {
2827
protocol: 'WS',
2928
},
3029
introspection: {
31-
queryName: 'IntrospectionQuery',
3230
method: 'POST',
3331
schemaDescription: false,
3432
},
@@ -48,8 +46,6 @@ export const normalizeLaboratorySettings = (
4846
protocol: settings?.subscriptions?.protocol ?? defaultLaboratorySettings.subscriptions.protocol,
4947
},
5048
introspection: {
51-
queryName:
52-
settings?.introspection?.queryName ?? defaultLaboratorySettings.introspection.queryName,
5349
method: settings?.introspection?.method ?? defaultLaboratorySettings.introspection.method,
5450
schemaDescription:
5551
settings?.introspection?.schemaDescription ??

0 commit comments

Comments
 (0)