Skip to content

Commit 2455907

Browse files
dimaMachinadimaMachina
authored
[2] remove useQueryEditor, useVariableEditor, useHeaderEditor, useResponseEditor hooks (#3950)
* use execution store * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * default query * persist headers * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * reduce rerenders * add logs * try * cleanup * cspell * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * fixes * fixes * fixes * fixes * fixes * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * prettier * upd * move plugins check to store * upd * upd * refactor * refactor * upd * upd * upd * upd * upd * upd * lint fix * Delete .changeset/five-cars-roll.md * Update .changeset/warm-shoes-boil.md * fix build
1 parent be5f6bc commit 2455907

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+875
-945
lines changed

‎.changeset/warm-shoes-boil.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
'@graphiql/react': minor
3+
'@graphiql/plugin-history': minor
4+
'@graphiql/plugin-doc-explorer': minor
5+
'graphiql': patch
6+
---
7+
8+
- remove `useQueryEditor`, `useVariableEditor`, `useHeaderEditor`, `useResponseEditor` hooks
9+
- remove `UseHeaderEditorArgs`, `UseQueryEditorArgs`, `UseResponseEditorArgs`, `UseVariableEditorArgs` exports
10+
- rename components
11+
- `StorageContextProvider` => `StorageStore`
12+
- `EditorContextProvider` => `EditorStore`
13+
- `SchemaContextProvider` => `SchemaStore`
14+
- `ExecutionContextProvider` => `ExecutionStore`
15+
- `HistoryContextProvider` => `HistoryStore`
16+
- `ExplorerContextProvider` => `ExplorerStore`

‎packages/graphiql-plugin-doc-explorer/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
# `@graphiql/plugin-doc-explorer`
2+
3+
## API
4+
5+
- `useDocExplorer`: Handles the state for the doc explorer
6+
- `useDocExplorerActions`: Actions related to the doc explorer

‎packages/graphiql-plugin-doc-explorer/src/components/__tests__/doc-explorer.spec.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { act, render } from '@testing-library/react';
22
import { GraphQLInt, GraphQLObjectType, GraphQLSchema } from 'graphql';
33
import { FC, useEffect } from 'react';
44
import {
5-
DocExplorerContextProvider,
5+
DocExplorerStore,
66
useDocExplorer,
77
useDocExplorerActions,
88
} from '../../context';
99
import { DocExplorer } from '../doc-explorer';
10-
import { schemaStore } from '../../../../graphiql-react/dist/schema';
10+
import { schemaStore } from '../../../../graphiql-react/dist/stores/schema';
1111

1212
function makeSchema(fieldName = 'field') {
1313
return new GraphQLSchema({
@@ -43,9 +43,9 @@ const withErrorSchemaContext = {
4343

4444
const DocExplorerWithContext: FC = () => {
4545
return (
46-
<DocExplorerContextProvider>
46+
<DocExplorerStore>
4747
<DocExplorer />
48-
</DocExplorerContextProvider>
48+
</DocExplorerStore>
4949
);
5050
};
5151

@@ -109,9 +109,9 @@ describe('DocExplorer', () => {
109109
schema: initialSchema,
110110
});
111111
const { container, rerender } = render(
112-
<DocExplorerContextProvider>
112+
<DocExplorerStore>
113113
<SetInitialStack />
114-
</DocExplorerContextProvider>,
114+
</DocExplorerStore>,
115115
);
116116

117117
// First proper render of doc explorer
@@ -122,9 +122,9 @@ describe('DocExplorer', () => {
122122
});
123123
});
124124
rerender(
125-
<DocExplorerContextProvider>
125+
<DocExplorerStore>
126126
<DocExplorer />
127-
</DocExplorerContextProvider>,
127+
</DocExplorerStore>,
128128
);
129129

130130
const [title] = container.querySelectorAll('.graphiql-doc-explorer-title');
@@ -138,9 +138,9 @@ describe('DocExplorer', () => {
138138
});
139139
});
140140
rerender(
141-
<DocExplorerContextProvider>
141+
<DocExplorerStore>
142142
<DocExplorer />
143-
</DocExplorerContextProvider>,
143+
</DocExplorerStore>,
144144
);
145145
const [title2] = container.querySelectorAll('.graphiql-doc-explorer-title');
146146
// Because `Query.field` still exists in the new schema, we can still render it
@@ -171,9 +171,9 @@ describe('DocExplorer', () => {
171171
schema: initialSchema,
172172
});
173173
const { container, rerender } = render(
174-
<DocExplorerContextProvider>
174+
<DocExplorerStore>
175175
<SetInitialStack />
176-
</DocExplorerContextProvider>,
176+
</DocExplorerStore>,
177177
);
178178

179179
// First proper render of doc explorer
@@ -184,9 +184,9 @@ describe('DocExplorer', () => {
184184
});
185185
});
186186
rerender(
187-
<DocExplorerContextProvider>
187+
<DocExplorerStore>
188188
<DocExplorer />
189-
</DocExplorerContextProvider>,
189+
</DocExplorerStore>,
190190
);
191191

192192
const title = container.querySelector('.graphiql-doc-explorer-title')!;
@@ -200,9 +200,9 @@ describe('DocExplorer', () => {
200200
});
201201
});
202202
rerender(
203-
<DocExplorerContextProvider>
203+
<DocExplorerStore>
204204
<DocExplorer />
205-
</DocExplorerContextProvider>,
205+
</DocExplorerStore>,
206206
);
207207
const title2 = container.querySelector('.graphiql-doc-explorer-title')!;
208208
// Because `Query.field` doesn't exist anymore, the top-most item we can render is `Query`

‎packages/graphiql-plugin-doc-explorer/src/components/__tests__/type-documentation.spec.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
import { docExplorerStore } from '../../context';
1111
import { TypeDocumentation } from '../type-documentation';
1212
import { unwrapType } from './test-utils';
13-
import { schemaStore } from '../../../../graphiql-react/dist/schema';
13+
import { schemaStore } from '../../../../graphiql-react/dist/stores/schema';
1414

1515
const TypeDocumentationWithContext: FC<{ type: GraphQLNamedType }> = ({
1616
type,

‎packages/graphiql-plugin-doc-explorer/src/context.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
} from 'graphql';
1717
import { FC, ReactElement, ReactNode, useEffect } from 'react';
1818
import {
19-
SchemaContextType,
19+
SchemaReference,
2020
useSchemaStore,
2121
createBoundedUseStore,
2222
} from '@graphiql/react';
@@ -45,7 +45,7 @@ export type DocExplorerNavStack = [
4545
...DocExplorerNavStackItem[],
4646
];
4747

48-
export type DocExplorerContextType = {
48+
export type DocExplorerStoreType = {
4949
/**
5050
* A stack of navigation items. The last item in the list is the current one.
5151
* This list always contains at least one item.
@@ -67,7 +67,7 @@ export type DocExplorerContextType = {
6767
*/
6868
reset(): void;
6969
resolveSchemaReferenceToNavItem(
70-
schemaReference: SchemaContextType['schemaReference'],
70+
schemaReference: SchemaReference | null,
7171
): void;
7272
/**
7373
* Replace the nav stack with an updated version using the new schema.
@@ -78,7 +78,7 @@ export type DocExplorerContextType = {
7878

7979
const INITIAL_NAV_STACK: DocExplorerNavStack = [{ name: 'Docs' }];
8080

81-
export const docExplorerStore = createStore<DocExplorerContextType>(
81+
export const docExplorerStore = createStore<DocExplorerStoreType>(
8282
(set, get) => ({
8383
explorerNavStack: INITIAL_NAV_STACK,
8484
actions: {
@@ -235,7 +235,7 @@ export const docExplorerStore = createStore<DocExplorerContextType>(
235235
}),
236236
);
237237

238-
export const DocExplorerContextProvider: FC<{
238+
export const DocExplorerStore: FC<{
239239
children: ReactNode;
240240
}> = ({ children }) => {
241241
const { schema, validationErrors, schemaReference } = useSchemaStore();

‎packages/graphiql-plugin-doc-explorer/src/index.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,12 @@ import { DocExplorer } from './components';
99
export * from './components';
1010

1111
export {
12-
DocExplorerContextProvider,
12+
DocExplorerStore,
1313
useDocExplorer,
1414
useDocExplorerActions,
1515
} from './context';
1616

1717
export type {
18-
DocExplorerContextType,
1918
DocExplorerFieldDef,
2019
DocExplorerNavStack,
2120
DocExplorerNavStackItem,

‎packages/graphiql-plugin-history/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
# `@graphiql/plugin-history`
2+
3+
## API
4+
5+
- `useHistory`: Persists executed requests in storage
6+
- `useHistoryActions`: Actions related to the history

‎packages/graphiql-plugin-history/src/__tests__/components.spec.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { fireEvent, render } from '@testing-library/react';
22
import type { ComponentProps } from 'react';
33
import { formatQuery, HistoryItem } from '../components';
4-
import { HistoryContextProvider } from '../context';
4+
import { HistoryStore } from '../context';
55
import { Tooltip, GraphiQLProvider } from '@graphiql/react';
6-
import { editorStore } from '../../../graphiql-react/dist/editor/context';
6+
import { editorStore } from '../../../graphiql-react/dist/stores/editor';
77

88
const mockQuery = /* GraphQL */ `
99
query Test($string: String) {
@@ -25,9 +25,9 @@ const QueryHistoryItemWithContext: typeof HistoryItem = props => {
2525
return (
2626
<Tooltip.Provider>
2727
<GraphiQLProvider fetcher={vi.fn()}>
28-
<HistoryContextProvider>
28+
<HistoryStore>
2929
<HistoryItem {...props} />
30-
</HistoryContextProvider>
30+
</HistoryStore>
3131
</GraphiQLProvider>
3232
</Tooltip.Provider>
3333
);

‎packages/graphiql-plugin-history/src/context.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
// eslint-disable-next-line react/jsx-filename-extension -- TODO
22
import { FC, ReactElement, ReactNode, useEffect } from 'react';
33
import { createStore } from 'zustand';
4-
import { HistoryStore, QueryStoreItem } from '@graphiql/toolkit';
4+
import {
5+
HistoryStore as ToolkitHistoryStore,
6+
QueryStoreItem,
7+
} from '@graphiql/toolkit';
58
import {
69
useExecutionStore,
710
useEditorStore,
811
useStorage,
912
createBoundedUseStore,
1013
} from '@graphiql/react';
1114

12-
const historyStore = createStore<HistoryContextType>((set, get) => ({
15+
const historyStore = createStore<HistoryStoreType>((set, get) => ({
1316
historyStorage: null!,
1417
actions: {
1518
addToHistory(operation) {
@@ -36,8 +39,8 @@ const historyStore = createStore<HistoryContextType>((set, get) => ({
3639
},
3740
}));
3841

39-
type HistoryContextType = {
40-
historyStorage: HistoryStore;
42+
type HistoryStoreType = {
43+
historyStorage: ToolkitHistoryStore;
4144
actions: {
4245
/**
4346
* Add an operation to the history.
@@ -100,7 +103,7 @@ type HistoryContextType = {
100103
};
101104
};
102105

103-
type HistoryContextProviderProps = {
106+
type HistoryStoreProps = {
104107
children: ReactNode;
105108
/**
106109
* The maximum number of executed operations to store.
@@ -110,12 +113,12 @@ type HistoryContextProviderProps = {
110113
};
111114

112115
/**
113-
* The functions send the entire operation so users can customize their own application with
114-
* <HistoryContext.Provider value={customizedFunctions} /> and get access to the operation plus
115-
* any additional props they added for their needs (i.e., build their own functions that may save
116-
* to a backend instead of localStorage and might need an id property added to the QueryStoreItem)
116+
* The functions send the entire operation so users can customize their own application and get
117+
* access to the operation plus any additional props they added for their needs (i.e., build their
118+
* own functions that may save to a backend instead of localStorage and might need an id property
119+
* added to the `QueryStoreItem`)
117120
*/
118-
export const HistoryContextProvider: FC<HistoryContextProviderProps> = ({
121+
export const HistoryStore: FC<HistoryStoreProps> = ({
119122
maxHistoryLength = 20,
120123
children,
121124
}) => {
@@ -125,7 +128,7 @@ export const HistoryContextProvider: FC<HistoryContextProviderProps> = ({
125128
const storage = useStorage();
126129

127130
const historyStorage = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, code is optimized by React Compiler
128-
new HistoryStore(storage, maxHistoryLength);
131+
new ToolkitHistoryStore(storage, maxHistoryLength);
129132

130133
useEffect(() => {
131134
historyStore.setState({ historyStorage });

‎packages/graphiql-plugin-history/src/index.ts‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,4 @@ export const HISTORY_PLUGIN: GraphiQLPlugin = {
1111

1212
export { History };
1313

14-
export {
15-
HistoryContextProvider,
16-
useHistory,
17-
useHistoryActions,
18-
} from './context';
14+
export { HistoryStore, useHistory, useHistoryActions } from './context';

0 commit comments

Comments
 (0)