GraphQL Explorer Plugin throwing error #2763
Comments
|
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: I just did it now so I haven't investigated enough yet. If I have something more, I'll add info to this comment. EDIT#1Below 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. :/ EDIT#2Here'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 |
|
@wilhelmeek, thank you. For some unknown reason, I had 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 |
|
My other issue was resolved by rewriting components to use |
|
I added |
|
Full stack trace is |
|
@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 |
|
looks like i found the problem, I was using |
|
Seems to work for me now, the issue was I was using |
|
hey i got the same issue with graphiql 2.2.0....
|
|
@eMerzh if you also upgrade |
|
Hey, so it happens again on latest |
|
@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 |
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 themIs there anything I'm missing, has anyone else come across this?
The text was updated successfully, but these errors were encountered: