Skip to content

Commit fd3f9e6

Browse files
dimaMachinadimaMachina
authored
graphiql 5: Ensure storage and theme store values aren't shared between GraphiQL instances. Deprecate useTheme and useStorage hooks in favour of values from useGraphiQL and useGraphiQLActions hooks (#4074)
* upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * upd * polish * polish * polish * polish * upd * fix unit tests * upd * upd * Update components.spec.tsx * Update components.spec.tsx * Update components.spec.tsx * set timeout to 6s * set timeout to 7s * set timeout to 7s * try 8 * 15? * upd * upd * upd * upd * upd * upd * upd * try use mounted to avoid hydration errors with localStorage * try use mounted to avoid hydration errors with localStorage * try use mounted to avoid hydration errors with localStorage * prettier and timeout * upd * temporarily add `graphql-language-service` in changeset to test esm sh example * add esm.sh file to vite `lib.entry` * use minor semver * add `@graphiql/react` to peerDeps for history and doc explorer * upd * update esm example * prettier * cleanup * better changeset * Update .changeset/cold-ads-end.md
1 parent 416e3a0 commit fd3f9e6

File tree

40 files changed

+383
-325
lines changed

40 files changed

+383
-325
lines changed

‎.changeset/cold-ads-end.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
'@graphiql/plugin-history': minor
3+
'@graphiql/plugin-doc-explorer': minor
4+
'@graphiql/react': minor
5+
'graphiql': minor
6+
---
7+
8+
Ensure `storage` and `theme` store values aren't shared between GraphiQL instances. Deprecate `useTheme` and `useStorage` hooks in favour of values from `useGraphiQL` and `useGraphiQLActions` hooks
9+
10+
feat(`@graphiql/plugin-history`/`@graphiql/plugin-doc-explorer`): move `@graphiql/react` to `peerDependencies`

‎examples/graphiql-cdn/index.html‎

Lines changed: 7 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,19 @@
4242
{
4343
"imports": {
4444
"react": "https://esm.sh/react@19.1.0",
45-
"react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",
45+
"react/": "https://esm.sh/react@19.1.0/",
4646

4747
"react-dom": "https://esm.sh/react-dom@19.1.0",
48-
"react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
49-
"@emotion/is-prop-valid": "data:text/javascript,",
48+
"react-dom/": "https://esm.sh/react-dom@19.1.0/",
5049

5150
"graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
51+
"graphiql/": "https://esm.sh/graphiql/",
5252
"@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
53-
"@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@emotion/is-prop-valid",
53+
"@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@graphiql/toolkit,@emotion/is-prop-valid",
5454

5555
"@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
56-
"graphql": "https://esm.sh/graphql@16.11.0"
56+
"graphql": "https://esm.sh/graphql@16.11.0",
57+
"@emotion/is-prop-valid": "data:text/javascript,"
5758
}
5859
}
5960
</script>
@@ -63,23 +64,7 @@
6364
import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
6465
import { createGraphiQLFetcher } from '@graphiql/toolkit';
6566
import { explorerPlugin } from '@graphiql/plugin-explorer';
66-
67-
import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
68-
import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
69-
import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';
70-
71-
globalThis.MonacoEnvironment = {
72-
getWorker(_workerId, label) {
73-
console.info('MonacoEnvironment.getWorker', { label });
74-
switch (label) {
75-
case 'json':
76-
return createJSONWorker();
77-
case 'graphql':
78-
return createGraphQLWorker();
79-
}
80-
return createEditorWorker();
81-
},
82-
};
67+
import 'graphiql/setup-workers/esm.sh';
8368

8469
const fetcher = createGraphiQLFetcher({
8570
url: 'https://countries.trevorblades.com',

‎examples/graphiql-webpack/src/index.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { explorerPlugin } from '@graphiql/plugin-explorer';
66
import { getSnippets } from './snippets';
77
import { codeExporterPlugin } from '@graphiql/plugin-code-exporter';
88
import { createGraphiQLFetcher } from '@graphiql/toolkit';
9-
import { useStorage } from '@graphiql/react';
9+
import { useGraphiQL } from '@graphiql/react';
1010
import { serverSelectPlugin, LAST_URL_KEY } from './select-server-plugin';
1111
import 'graphiql/setup-workers/webpack';
1212
import './index.css';
@@ -81,17 +81,17 @@ function App() {
8181
fetcher={fetcher}
8282
shouldPersistHeaders
8383
>
84-
<GraphiQLStorageBound setUrl={setUrl} />
84+
<GraphiQLContextBound setUrl={setUrl} />
8585
</GraphiQL>
8686
);
8787
}
8888

8989
/**
90-
* `useStorage` is a context hook that's only available within the `<GraphiQL>`
91-
* provider tree. `<GraphiQLStorageBound>` must be rendered as a child of `<GraphiQL>`.
90+
* `useGraphiQL` is a context hook that's only available within the `<GraphiQL>`
91+
* provider tree. `<GraphiQLContextBound>` must be rendered as a child of `<GraphiQL>`.
9292
*/
93-
function GraphiQLStorageBound({ setUrl }) {
94-
const storage = useStorage();
93+
function GraphiQLContextBound({ setUrl }) {
94+
const storage = useGraphiQL(state => state.storage);
9595
const lastUrl = storage.get(LAST_URL_KEY) ?? STARTING_URL;
9696

9797
useEffect(() => {

‎examples/graphiql-webpack/src/select-server-plugin.jsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
import * as React from 'react';
2-
import { useStorage, useSchemaStore } from '@graphiql/react';
2+
import { useGraphiQL } from '@graphiql/react';
33

44
export const LAST_URL_KEY = 'lastURL';
55

66
export const PREV_URLS_KEY = 'previousURLs';
77

88
const SelectServer = ({ url, setUrl }) => {
99
const inputRef = React.useRef(null);
10-
const storage = useStorage();
10+
const { storage, schema, isIntrospecting, fetchError } = useGraphiQL(
11+
state => ({
12+
storage: state.storage,
13+
schema: state.schema,
14+
isIntrospecting: state.isIntrospecting,
15+
fetchError: state.fetchError,
16+
}),
17+
);
1118
const lastUrl = storage.get(LAST_URL_KEY);
1219
const currentUrl = lastUrl ?? url;
1320
const [inputValue, setInputValue] = React.useState(currentUrl);
@@ -16,8 +23,6 @@ const SelectServer = ({ url, setUrl }) => {
1623
);
1724
const [error, setError] = React.useState(null);
1825

19-
const { schema, isFetching, fetchError } = useSchemaStore();
20-
2126
const sameValue = inputValue.trim() === url;
2227

2328
return (
@@ -71,7 +76,7 @@ const SelectServer = ({ url, setUrl }) => {
7176
</div>
7277
</div>
7378
)}
74-
{isFetching ? (
79+
{isIntrospecting ? (
7580
<div className="select-server--schema-loading">Schema loading...</div>
7681
) : (
7782
schema &&

‎packages/graphiql-plugin-doc-explorer/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,14 +36,14 @@
3636
"test": "vitest"
3737
},
3838
"peerDependencies": {
39+
"@graphiql/react": "^0.35.0-rc.0",
3940
"graphql": "^15.5.0 || ^16.0.0 || ^17.0.0",
4041
"react": "^18 || ^19",
42+
"react-compiler-runtime": "19.1.0-rc.1",
4143
"react-dom": "^18 || ^19"
4244
},
4345
"dependencies": {
44-
"@graphiql/react": "^0.35.0",
4546
"@headlessui/react": "^2.2",
46-
"react-compiler-runtime": "19.1.0-rc.1",
4747
"zustand": "^5"
4848
},
4949
"devDependencies": {

‎packages/graphiql-plugin-history/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@
3535
"test": "vitest"
3636
},
3737
"peerDependencies": {
38+
"@graphiql/react": "^0.35.0-rc.0",
3839
"react": "^18 || ^19",
40+
"react-compiler-runtime": "19.1.0-rc.1",
3941
"react-dom": "^18 || ^19"
4042
},
4143
"dependencies": {
42-
"@graphiql/react": "^0.35.0",
4344
"@graphiql/toolkit": "^0.11.3",
44-
"react-compiler-runtime": "19.1.0-rc.1",
4545
"zustand": "^5"
4646
},
4747
"devDependencies": {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ vi.mock('@graphiql/react', async () => {
1818
variableEditor: { setValue: mockedSetVariableEditor },
1919
headerEditor: { setValue: mockedSetHeaderEditor },
2020
tabs: [],
21+
storage: {
22+
get() {},
23+
},
2124
};
2225
},
2326
};

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,7 @@ import {
44
HistoryStore as ToolkitHistoryStore,
55
QueryStoreItem,
66
} from '@graphiql/toolkit';
7-
import {
8-
useGraphiQL,
9-
pick,
10-
useStorage,
11-
createBoundedUseStore,
12-
} from '@graphiql/react';
7+
import { useGraphiQL, pick, createBoundedUseStore } from '@graphiql/react';
138

149
const historyStore = createStore<HistoryStoreType>((set, get) => ({
1510
historyStorage: null,
@@ -122,12 +117,10 @@ export const HistoryStore: FC<HistoryStoreProps> = ({
122117
maxHistoryLength = 20,
123118
children,
124119
}) => {
125-
const { isFetching, tabs, activeTabIndex } = useGraphiQL(
126-
pick('isFetching', 'tabs', 'activeTabIndex'),
120+
const { isFetching, tabs, activeTabIndex, storage } = useGraphiQL(
121+
pick('isFetching', 'tabs', 'activeTabIndex', 'storage'),
127122
);
128123
const activeTab = tabs[activeTabIndex]!;
129-
const storage = useStorage();
130-
131124
const historyStorage = // eslint-disable-line react-hooks/exhaustive-deps -- false positive, code is optimized by React Compiler
132125
new ToolkitHistoryStore(storage, maxHistoryLength);
133126

‎packages/graphiql-plugin-history/vite.config.mts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default defineConfig({
5252
...Object.keys(packageJSON.dependencies),
5353
],
5454
output: {
55+
// Separate chunks for all modules
5556
preserveModules: true,
5657
},
5758
},

‎packages/graphiql-plugin-history/vitest.config.mts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default defineConfig({
77
test: {
88
globals: true,
99
environment: 'jsdom',
10-
setupFiles: ['./setup-files.ts'],
10+
setupFiles: ['./setup-files.ts', '../graphiql/setup-window.ts'],
1111
alias: [
1212
{
1313
// Fixes Error: Failed to resolve entry for package "monaco-editor". The package may have incorrect main/module/exports specified in its package.json.

0 commit comments

Comments
 (0)