Closed faizan-siddiqui closed 2 years ago
Hey @faizan-siddiqui 👋 thanks for opening an issue! Can you give more context about the setup you're using? I copy-pasted the example from the readme into a Codesandbox but wasn't able to reproduce the issue: https://codesandbox.io/s/agitated-wright-m56pb2?file=/src/App.tsx
I have the same problem and I am using Next.js.
@tom-quiltt @faizan-siddiqui additional information about your setup or, even better, a running example would help with troubleshooting.
In my remix app, when I try to upgrade graphiql to v2 and use the explorer plugin, I get the following error/stack after clicking the button to open explorer:
useGivenContext@http://localhost:3000/build/_shared/chunk-6QWELR4S.js:675:60
ExplorerPlugin@http://localhost:3000/build/routes/explorer-GBKJ37U4.js:15383:23
renderWithHooks@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:13563:35
mountIndeterminateComponent@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:16292:21
beginWork@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:17247:22
beginWork$1@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:21048:22
performUnitOfWork@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20496:20
workLoopSync@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20432:30
renderRootSync@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20411:15
recoverFromConcurrentError@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20033:42
performSyncWorkOnRoot@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:20175:28
flushSyncCallbacks@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:10576:30
node_modules/react-dom/cjs/react-dom.development.js/ensureRootIsScheduled/<@http://localhost:3000/build/_shared/chunk-XVUW4YK6.js:19924:21
I just did it now so I haven't investigated enough yet. If I have something more, I'll add info to this comment.
Below are relevant snippets for my implementation:
// app/routes/explorer.tsx
// Remix route/page component.
export default function Explorer(): JSX.Element {
// My GraphQL API has the introspection query disabled.
// In Remix loader I retrieve exposed `/schema.graphql` and `schemaText` is GraphQL SDL file contents.
const { schemaText } = useLoaderData<ILoaderData>();
return (
// useState + useEffect helper component. It renders children only in the browser so that codemirror doesn't break SSR.
<ClientOnly>
<GraphiQLExplorer schemaText={schemaText} />
</ClientOnly>
);
}
import { useExplorerPlugin } from "@graphiql/plugin-explorer";
import { GraphiQL } from "graphiql";
import { buildSchema } from "graphql";
import { useState } from "react";
import { useSession } from "../authentication/hooks/useSession";
import { createFetcher } from "./helpers/createFetcher";
interface IGraphiQLExplorerProps {
schemaText: string;
}
export function GraphiQLExplorer({ schemaText }: IGraphiQLExplorerProps): JSX.Element {
// Custom hook for auth token
const token = useSession();
const [query, setQuery] = useState("");
const [variables, setVariables] = useState("");
const schema = buildSchema(schemaText);
const explorerPlugin = useExplorerPlugin({ onEdit: setQuery, query, schema });
function updateQuery(query = ""): void {
setQuery(query);
}
function updateVariables(variables = ""): void {
setVariables(variables);
}
return (
// I have some CSS overrides.
<div className="graphiql-container-wrap graphiql-container">
<GraphiQL
defaultEditorToolsVisibility="variables"
// Custom fetcher that disables introspection because I'm passing built schema
fetcher={createFetcher(token)}
isHeadersEditorEnabled={false}
onEditQuery={updateQuery}
onEditVariables={updateVariables}
plugins={[explorerPlugin]}
query={query}
schema={schema}
variables={variables}
>
{/* Some custom buttons, not important. */}
</GraphiQL>
</div>
);
}
Another issue with my implementation is that when I start typing the query, the caret keeps going back to the start, making the query editor unusable. :/
Here's my code from before upgrade to v2 that works pretty much without issues:
import GraphiQL from "graphiql";
import { Explorer as GraphiQLExplorer } from "graphiql-explorer";
import graphiqlStyles from "graphiql/graphiql.css";
import { buildSchema } from "graphql";
import { useState } from "react";
import { useSession } from "../components/authentication/hooks/useSession";
import { createFetcher } from "../components/explorer/helpers/createFetcher";
import { ClientOnly } from "../components/utils/ClientOnly";
// Remix route/page component.
export default function Explorer(): JSX.Element {
const { schemaText } = useLoaderData<ILoaderData>();
const token = useSession();
const [graphiQL, setGraphiQL] = useState<GraphiQL | null>(null);
const [isExplorerOpen, setIsExplorerOpen] = useState(false);
const [query, setQuery] = useState("");
const [variables, setVariables] = useState("");
const schema = buildSchema(schemaText);
function toggleExplorer(): void {
setIsExplorerOpen(!isExplorerOpen);
}
function updateQuery(query = ""): void {
setQuery(query);
}
function updateVariables(variables = ""): void {
setVariables(variables);
}
return (
<ClientOnly>
<div className="graphiql-container-wrap graphiql-container">
<GraphiQLExplorer
explorerIsOpen={isExplorerOpen}
onEdit={updateQuery}
onRunOperation={() => graphiQL?.ref?.props.executionContext.run()}
onToggleExplorer={toggleExplorer}
query={query}
schema={schema}
/>
<GraphiQL
defaultVariableEditorOpen={true}
fetcher={createFetcher(token)}
headerEditorEnabled={false}
onEditQuery={updateQuery}
onEditVariables={updateVariables}
query={query}
ref={ref => setGraphiQL(ref)}
schema={schema}
variables={variables}
>
<GraphiQL.Toolbar>
<GraphiQL.Button label="Explorer" onClick={toggleExplorer} title="Toggle Explorer" />
<GraphiQL.Button
label="History"
onClick={() => graphiQL?.ref?.props.historyContext?.toggle()}
title="Toggle History"
/>
</GraphiQL.Toolbar>
</GraphiQL>
</div>
</ClientOnly>
);
}
Fix for me was to make sure my versions of @graphiql/react
and @graphiql/toolkit
were up to date.
@wilhelmeek, thank you. For some unknown reason, I had @graphiql/react
1.0.0-next.2 in my package.json. Using the latest 0.x version fixed the crash for me too. No idea how it got there. 🤦🏻♂️
Now I only have to come up with why is my implementation broken when writing query (caret going back to the beginning).
Good shout @wilhelmeek! @faizan-siddiqui can you check which version of @graphiql/react
you have installed?
My other issue was resolved by rewriting components to use GraphiQLProvider
+ GraphiQLInterface
with useEditorContext
. My mistake was trying to keep my own state management instead of relying on your context and query/variable editor.
I added "@graphiql/react": "^0.13.2"
and "@graphiql/toolkit": "^0.8.0"
to my dependencies in package.json
and still get the same error :(
Full stack trace is
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at useEditorContext (bundle.js:24224)
at ExplorerPlugin (bundle.js:22963)
at renderWithHooks (bundle.js:113030)
at mountIndeterminateComponent (bundle.js:116695)
at beginWork (bundle.js:118163)
at HTMLUnknownElement.callCallback (bundle.js:100826)
at Object.invokeGuardedCallbackDev (bundle.js:100875)
at invokeGuardedCallback (bundle.js:100937)
at beginWork$1 (bundle.js:123950)
at performUnitOfWork (bundle.js:123083)
@faizan-siddiqui can you share a snippet of your React code and details about the setup (Next.js, Vite, CRA, whatever you're using) so that we can dig into this? It's hard to investigate without a reproduction.
Hi @thomasheyenbrock thanks for having a look, yep i was able to replicate the problem here, I suspect it's something in my package.json
that is conflicting, as I used almost the same sandbox as the one you linked but put in the dependencies I am using https://codesandbox.io/s/little-bird-23lulc
looks like i found the problem, I was using "graphiql": "2.0.3"
, I changed it to "graphiql": "2.0.7"
and it's working now, I tested removing "@graphiql/react": "^0.13.2" and "@graphiql/toolkit": "^0.8.0" and it's still working now , thanks heaps everyone!
Seems to work for me now, the issue was I was using "graphiql": "2.0.3"
instead of "graphiql": "2.0.7"
hey i got the same issue with graphiql 2.2.0.... if you https://codesandbox.io/s/agitated-wright-m56pb2?file=/package.json and change graphiql to 2.2.0, then click on explorer icon you'll have
@eMerzh if you also upgrade @graphiql/plugin-explorer
to the latest version (which is 0.1.12
) then it should work
Hey, so it happens again on latest 0.1.20
but basically ALL versions after/except the 0.1.12
as @thomasheyenbrock has mentioned above, are having the same issues.
For the context, I am running this inside a Storybook but the error is the same as everyone else.
Thanks.
@hugh-onf can you share a reproduction? Are you using the latest versions of all GraphiQL related packages?
@thomasheyenbrock thanks and indeed I was using an older graphiql@2.2.0
but after updating it to the latest 2.4.7
it seems all working together now.
I have added GraphQL Explorer Plugin, following the same steps in the readme here and the examples: https://github.com/graphql/graphiql/tree/main/packages/graphiql-plugin-explorer
The plugin button shows up but when i click it, i get this error:
'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
Is there anything I'm missing, has anyone else come across this?