update graphiql docs, add Usage with a Custom Storage Namespace (#4068)

* upd

* upd

* upd

* upd

* upd

* Update README.md

Author: dimaMachina

packages/graphiql/README.md

@@ -204,32 +204,28 @@ You can also create your own theme in CSS. As a reference, the default
 `graphiql` theme definition can be found
 [here](../graphiql-react/src/style/codemirror.css).
 
-### Usage with React Router and `ssr: true`
+## Usage with React Router and `ssr: true`
 
 When using GraphiQL with [React Router’s SSR mode](https://reactrouter.com/api/framework-conventions/react-router.config.ts#ssr),
 you need to mark the GraphiQL component as a [client module](https://reactrouter.com/api/framework-conventions/client-modules)
 by adding `.client` to the file name.
 
 ```tsx
 // graphiql.client.tsx
-import type { FC } from 'react';
 import { GraphiQL } from 'graphiql';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
 
 const fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });
 
-export const Route: FC = () => {
-  return <GraphiQL fetcher={fetcher} />;
-};
+export const graphiql = <GraphiQL fetcher={fetcher} />;
 ```
 
-```tsx
-// route.tsx
+```ts
+// route.ts
 import type { FC } from 'react';
-import { useEffect, useState } from 'react';
 import type { LinksFunction, MetaFunction } from 'react-router';
 import graphiqlStyles from 'graphiql/style.css?url';
-import { Route as GraphiQL } from './graphiql.client';
+import { graphiql } from './graphiql.client';
 
 export const meta: MetaFunction = () => {
   return [{ title: 'API Explorer' }];
@@ -240,14 +236,42 @@ export const links: LinksFunction = () => {
 };
 
 const Route: FC = () => {
-  const [mounted, setMounted] = useState(false);
+  return graphiql;
+};
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
+export default Route;
+```
+
+## Usage with a Custom Storage Namespace
 
-  return mounted ? <GraphiQL /> : 'Loading...';
+When multiple GraphiQL instances run on the same origin—such as in different apps or
+environments—they can conflict by reading from and writing to the same `localStorage` keys. To
+prevent this, you can provide a custom `storage` object that prefixes all keys with a unique
+namespace, isolating each instance’s state and avoiding collisions.
+
+```tsx
+import type { FC } from 'react';
+import { GraphiQL } from 'graphiql';
+import { createGraphiQLFetcher } from '@graphiql/toolkit';
+
+const fetcher = createGraphiQLFetcher({ url: 'https://my.backend/graphql' });
+
+const NAMESPACE = 'my-namespace';
+
+const storage: typeof localStorage = {
+  ...localStorage,
+  getItem(key) {
+    return localStorage.getItem(`${NAMESPACE}:${key}`);
+  },
+  setItem(key, value) {
+    return localStorage.setItem(`${NAMESPACE}:${key}`, value);
+  },
+  removeItem(key) {
+    return localStorage.removeItem(`${NAMESPACE}:${key}`);
+  },
 };
 
-export default Route;
+export const App: FC = () => {
+  return <GraphiQL fetcher={fetcher} storage={myStorage} />;
+};
 ```

resources/custom-words.txt

@@ -211,6 +211,7 @@ tsup
 typeahead
 typeaheads
 typedoc
+typeof
 turbopack
 unfocus
 unnormalized