upd

Author: dimaMachina

examples/graphiql-webpack/src/index.jsx

@@ -9,7 +9,7 @@ import 'graphiql/style.css';
 import '@graphiql/plugin-explorer/style.css';
 import '@graphiql/plugin-code-exporter/style.css';
 import { createGraphiQLFetcher } from '@graphiql/toolkit';
-import { useStorageContext } from '@graphiql/react';
+import { useStorage } from '@graphiql/react';
 
 export const STARTING_URL =
   'https://swapi-graphql.netlify.app/.netlify/functions/index';
@@ -60,9 +60,9 @@ const style = { height: '100vh' };
 const explorer = explorerPlugin();
 
 const App = () => {
-  const storage = useStorageContext();
+  const storage = useStorage({ nonNull: true });
 
-  const lastUrl = storage?.get(LAST_URL_KEY);
+  const lastUrl = storage.get(LAST_URL_KEY);
   const [currentUrl, setUrl] = React.useState(lastUrl ?? STARTING_URL);
   // TODO: a breaking change where we make URL an internal state concern, and then expose hooks
   // so that you can handle/set URL state internally from a plugin

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

@@ -1,20 +1,20 @@
 import * as React from 'react';
 
 import './select-server-plugin.css';
-import { useStorageContext, useSchemaContext } from '@graphiql/react';
+import { useStorage, useSchemaContext } from '@graphiql/react';
 
 export const LAST_URL_KEY = 'lastURL';
 
 export const PREV_URLS_KEY = 'previousURLs';
 
 const SelectServer = ({ url, setUrl }) => {
   const inputRef = React.useRef(null);
-  const storage = useStorageContext();
-  const lastUrl = storage?.get(LAST_URL_KEY);
+  const storage = useStorage({ nonNull: true });
+  const lastUrl = storage.get(LAST_URL_KEY);
   const currentUrl = lastUrl ?? url;
   const [inputValue, setInputValue] = React.useState(currentUrl);
   const [previousUrls, setPreviousUrls] = React.useState(
-    JSON.parse(storage?.get(PREV_URLS_KEY)) ?? [currentUrl],
+    JSON.parse(storage.get(PREV_URLS_KEY)) ?? [currentUrl],
   );
   const [error, setError] = React.useState(null);