Skip to content

Commit 0844dc1

Browse files
dimaMachinadimaMachina
authored
[1] various refactor after zustand migration (#3949)
* 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 * Delete .changeset/five-cars-roll.md * Apply suggestions from code review * Apply suggestions from code review * Update .changeset/chilly-sloths-heal.md * Update .changeset/chilly-sloths-heal.md * Update .changeset/chilly-sloths-heal.md
1 parent 7ff9563 commit 0844dc1

File tree

30 files changed

+756
-831
lines changed

30 files changed

+756
-831
lines changed

‎.changeset/chilly-sloths-heal.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
---
2+
'@graphiql/plugin-doc-explorer': patch
3+
'@graphiql/plugin-explorer': patch
4+
'graphql-language-service': patch
5+
'@graphiql/plugin-history': patch
6+
'codemirror-graphql': patch
7+
'@graphiql/react': minor
8+
'graphiql': patch
9+
---
10+
11+
- replace `onCopyQuery` hook with `copyQuery` function
12+
- replace `onMergeQuery` hook with `mergeQuery` function
13+
- replace `onPrettifyEditors` hook with `prettifyEditors` function
14+
- remove `fetcher` prop from `SchemaContextProvider` and `schemaStore` and add `fetcher` to `executionStore`
15+
- add `onCopyQuery` and `onPrettifyQuery` props to `EditorContextProvider`
16+
- remove exports (use `GraphiQLProvider`)
17+
- `EditorContextProvider`
18+
- `ExecutionContextProvider`
19+
- `PluginContextProvider`
20+
- `SchemaContextProvider`
21+
- `StorageContextProvider`
22+
- `ExecutionContextType`
23+
- `PluginContextType`
24+
- feat(@graphiql/react): migrate React context to zustand:
25+
- replace `useExecutionContext` with `useExecutionStore` hook
26+
- replace `useEditorContext` with `useEditorStore` hook
27+
- prefer `getComputedStyle` over `window.getComputedStyle`

‎.eslintrc.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,11 @@ module.exports = {
142142
property: 'navigator',
143143
message: 'Use `navigator` instead',
144144
},
145+
{
146+
object: 'window',
147+
property: 'getComputedStyle',
148+
message: 'Use `getComputedStyle` instead',
149+
},
145150
],
146151
'no-return-assign': 'error',
147152
'no-return-await': 'error',

‎packages/codemirror-graphql/src/utils/info-addon.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -119,17 +119,19 @@ function showPopup(cm: CodeMirror.Editor, box: DOMRect, info: HTMLDivElement) {
119119
document.body.append(popup);
120120

121121
const popupBox = popup.getBoundingClientRect();
122-
const popupStyle = window.getComputedStyle(popup);
122+
const { marginLeft, marginRight, marginBottom, marginTop } =
123+
getComputedStyle(popup);
124+
123125
const popupWidth =
124126
popupBox.right -
125127
popupBox.left +
126-
parseFloat(popupStyle.marginLeft) +
127-
parseFloat(popupStyle.marginRight);
128+
parseFloat(marginLeft) +
129+
parseFloat(marginRight);
128130
const popupHeight =
129131
popupBox.bottom -
130132
popupBox.top +
131-
parseFloat(popupStyle.marginTop) +
132-
parseFloat(popupStyle.marginBottom);
133+
parseFloat(marginTop) +
134+
parseFloat(marginBottom);
133135

134136
let topPos = box.bottom;
135137
if (

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ type FieldMatch = {
158158

159159
export function useSearchResults() {
160160
const explorerNavStack = useDocExplorer();
161-
const { schema } = useSchemaStore();
161+
const schema = useSchemaStore(store => store.schema);
162162

163163
const navItem = explorerNavStack.at(-1)!;
164164

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ const EnumValue: FC<{ value: GraphQLEnumValue }> = ({ value }) => {
215215
};
216216

217217
const PossibleTypes: FC<{ type: GraphQLNamedType }> = ({ type }) => {
218-
const { schema } = useSchemaStore();
218+
const schema = useSchemaStore(store => store.schema);
219219
if (!schema || !isAbstractType(type)) {
220220
return null;
221221
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export type {
2424
export const DOC_EXPLORER_PLUGIN: GraphiQLPlugin = {
2525
title: 'Documentation Explorer',
2626
icon: function Icon() {
27-
const { visiblePlugin } = usePluginStore();
27+
const visiblePlugin = usePluginStore(store => store.visiblePlugin);
2828
return visiblePlugin === DOC_EXPLORER_PLUGIN ? (
2929
<DocsFilledIcon />
3030
) : (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ export type GraphiQLExplorerPluginProps = Omit<
6262
>;
6363

6464
const ExplorerPlugin: FC<GraphiQLExplorerPluginProps> = props => {
65-
const { setOperationName } = useEditorStore();
66-
const { schema } = useSchemaStore();
67-
const { run } = useExecutionStore();
65+
const setOperationName = useEditorStore(store => store.setOperationName);
66+
const schema = useSchemaStore(store => store.schema);
67+
const run = useExecutionStore(store => store.run);
6868

6969
// handle running the current operation from the plugin
7070
const handleRunOperation = useCallback(

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

Lines changed: 27 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,9 @@
1-
import type { Mock } from 'vitest';
21
import { fireEvent, render } from '@testing-library/react';
32
import type { ComponentProps } from 'react';
43
import { formatQuery, HistoryItem } from '../components';
54
import { HistoryContextProvider } from '../context';
6-
import {
7-
useEditorStore,
8-
Tooltip,
9-
StorageContextProvider,
10-
} from '@graphiql/react';
11-
12-
vi.mock('@graphiql/react', async () => {
13-
const originalModule = await vi.importActual('@graphiql/react');
14-
const mockedSetQueryEditor = vi.fn();
15-
const mockedSetVariableEditor = vi.fn();
16-
const mockedSetHeaderEditor = vi.fn();
17-
return {
18-
...originalModule,
19-
useEditorStore() {
20-
return {
21-
queryEditor: { setValue: mockedSetQueryEditor },
22-
variableEditor: { setValue: mockedSetVariableEditor },
23-
headerEditor: { setValue: mockedSetHeaderEditor },
24-
tabs: [],
25-
};
26-
},
27-
useExecutionStore() {
28-
return {};
29-
},
30-
};
31-
});
5+
import { Tooltip, GraphiQLProvider } from '@graphiql/react';
6+
import { editorStore } from '../../../graphiql-react/dist/editor/context';
327

338
const mockQuery = /* GraphQL */ `
349
query Test($string: String) {
@@ -49,11 +24,11 @@ type QueryHistoryItemProps = ComponentProps<typeof HistoryItem>;
4924
const QueryHistoryItemWithContext: typeof HistoryItem = props => {
5025
return (
5126
<Tooltip.Provider>
52-
<StorageContextProvider>
27+
<GraphiQLProvider fetcher={vi.fn()}>
5328
<HistoryContextProvider>
5429
<HistoryItem {...props} />
5530
</HistoryContextProvider>
56-
</StorageContextProvider>
31+
</GraphiQLProvider>
5732
</Tooltip.Provider>
5833
);
5934
};
@@ -78,15 +53,6 @@ function getMockProps(
7853
}
7954

8055
describe('QueryHistoryItem', () => {
81-
const store = useEditorStore();
82-
const mockedSetQueryEditor = store.queryEditor!.setValue as Mock;
83-
const mockedSetVariableEditor = store.variableEditor!.setValue as Mock;
84-
const mockedSetHeaderEditor = store.headerEditor!.setValue as Mock;
85-
beforeEach(() => {
86-
mockedSetQueryEditor.mockClear();
87-
mockedSetVariableEditor.mockClear();
88-
mockedSetHeaderEditor.mockClear();
89-
});
9056
it('renders operationName if label is not provided', () => {
9157
const otherMockProps = { item: { operationName: mockOperationName } };
9258
const props = getMockProps(otherMockProps);
@@ -108,6 +74,29 @@ describe('QueryHistoryItem', () => {
10874
});
10975

11076
it('selects the item when history label button is clicked', () => {
77+
const mockedSetQueryEditor = vi.fn();
78+
const mockedSetVariableEditor = vi.fn();
79+
const mockedSetHeaderEditor = vi.fn();
80+
type MonacoEditorWithOperationFacts = NonNullable<
81+
ReturnType<typeof editorStore.getInitialState>['queryEditor']
82+
>;
83+
type MonacoEditor = NonNullable<
84+
ReturnType<typeof editorStore.getInitialState>['variableEditor']
85+
>;
86+
87+
editorStore.setState({
88+
queryEditor: {
89+
setValue: mockedSetQueryEditor,
90+
} as unknown as MonacoEditorWithOperationFacts,
91+
variableEditor: {
92+
setValue: mockedSetVariableEditor,
93+
} as unknown as MonacoEditor,
94+
headerEditor: {
95+
setValue: mockedSetHeaderEditor,
96+
getValue: () => '',
97+
} as unknown as MonacoEditor,
98+
});
99+
111100
const otherMockProps = { item: { operationName: mockOperationName } };
112101
const mockProps = getMockProps(otherMockProps);
113102
const { container } = render(

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export const HistoryContextProvider: FC<HistoryContextProviderProps> = ({
119119
maxHistoryLength = 20,
120120
children,
121121
}) => {
122-
const { isFetching } = useExecutionStore();
122+
const isFetching = useExecutionStore(store => store.isFetching);
123123
const { tabs, activeTabIndex } = useEditorStore();
124124
const activeTab = tabs[activeTabIndex];
125125
const storage = useStorage();

‎packages/graphiql-react/src/constants.ts‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
1+
export const KEY_MAP = Object.freeze({
2+
prettify: ['Shift-Ctrl-P'],
3+
mergeFragments: ['Shift-Ctrl-M'],
4+
runQuery: ['Ctrl-Enter', 'Cmd-Enter'],
5+
autoComplete: ['Ctrl-Space'],
6+
copyQuery: ['Shift-Ctrl-C'],
7+
refetchSchema: ['Shift-Ctrl-R'],
8+
searchInEditor: ['Ctrl-F'],
9+
searchInDocs: ['Ctrl-K'],
10+
} as const);
11+
112
export const DEFAULT_QUERY = `# Welcome to GraphiQL
213
#
3-
# GraphiQL is an in-browser tool for writing, validating, and
4-
# testing GraphQL queries.
14+
# GraphiQL is an in-browser tool for writing, validating, and testing
15+
# GraphQL queries.
516
#
617
# Type queries into this side of the screen, and you will see intelligent
718
# typeaheads aware of the current GraphQL type schema and live syntax and
@@ -20,13 +31,13 @@ export const DEFAULT_QUERY = `# Welcome to GraphiQL
2031
#
2132
# Keyboard shortcuts:
2233
#
23-
# Prettify query: Shift-Ctrl-P (or press the prettify button)
34+
# Prettify query: ${KEY_MAP.prettify[0]} (or press the prettify button)
2435
#
25-
# Merge fragments: Shift-Ctrl-M (or press the merge button)
36+
# Merge fragments: ${KEY_MAP.mergeFragments[0]} (or press the merge button)
2637
#
27-
# Run Query: Ctrl-Enter (or press the play button)
38+
# Run Query: ${KEY_MAP.runQuery[0]} (or press the play button)
2839
#
29-
# Auto Complete: Ctrl-Space (or just start typing)
40+
# Auto Complete: ${KEY_MAP.autoComplete[0]} (or just start typing)
3041
#
3142
3243
`;

0 commit comments

Comments
 (0)