diff --git a/.changeset/short-gifts-heal.md b/.changeset/short-gifts-heal.md new file mode 100644 index 00000000000..48fd468a3b2 --- /dev/null +++ b/.changeset/short-gifts-heal.md @@ -0,0 +1,5 @@ +--- +'@graphiql/react': patch +--- + +Add missing `caller` arguments to hook calls so that the error message printed when a context provider is missing is more accurate about the component or hook that caused the error diff --git a/packages/graphiql-react/src/editor/header-editor.tsx b/packages/graphiql-react/src/editor/header-editor.tsx index f10df818cad..7ec5726a9dd 100644 --- a/packages/graphiql-react/src/editor/header-editor.tsx +++ b/packages/graphiql-react/src/editor/header-editor.tsx @@ -113,7 +113,7 @@ export function useHeaderEditor({ useHeaderEditor, ); - useCompletion(headerEditor); + useCompletion(headerEditor, useHeaderEditor); useKeyMap(headerEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run); useKeyMap(headerEditor, ['Shift-Ctrl-P'], prettify); diff --git a/packages/graphiql-react/src/editor/hooks.ts b/packages/graphiql-react/src/editor/hooks.ts index 7b0cffa77fa..42c8fc8921e 100644 --- a/packages/graphiql-react/src/editor/hooks.ts +++ b/packages/graphiql-react/src/editor/hooks.ts @@ -69,8 +69,11 @@ export function useChangeHandler( ]); } -export function useCompletion(editor: CodeMirrorEditor | null) { - const { schema } = useSchemaContext({ nonNull: true, caller: useCompletion }); +export function useCompletion( + editor: CodeMirrorEditor | null, + caller: Function, +) { + const { schema } = useSchemaContext({ nonNull: true, caller }); const explorer = useExplorerContext(); useEffect(() => { if (!editor) { diff --git a/packages/graphiql-react/src/editor/query-editor.tsx b/packages/graphiql-react/src/editor/query-editor.tsx index 0891c1b47fd..130819fed0c 100644 --- a/packages/graphiql-react/src/editor/query-editor.tsx +++ b/packages/graphiql-react/src/editor/query-editor.tsx @@ -324,7 +324,7 @@ export function useQueryEditor({ codeMirrorRef, ); - useCompletion(queryEditor); + useCompletion(queryEditor, useQueryEditor); useKeyMap(queryEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run); useKeyMap(queryEditor, ['Shift-Ctrl-C'], copy); diff --git a/packages/graphiql-react/src/editor/variable-editor.tsx b/packages/graphiql-react/src/editor/variable-editor.tsx index 0819bbf91bc..4fc5bbd7bdb 100644 --- a/packages/graphiql-react/src/editor/variable-editor.tsx +++ b/packages/graphiql-react/src/editor/variable-editor.tsx @@ -130,7 +130,7 @@ export function useVariableEditor({ useVariableEditor, ); - useCompletion(variableEditor); + useCompletion(variableEditor, useVariableEditor); useKeyMap(variableEditor, ['Cmd-Enter', 'Ctrl-Enter'], executionContext?.run); useKeyMap(variableEditor, ['Shift-Ctrl-P'], prettify); diff --git a/packages/graphiql-react/src/execution.tsx b/packages/graphiql-react/src/execution.tsx index ec1c2cf433a..6dfed6bd8a9 100644 --- a/packages/graphiql-react/src/execution.tsx +++ b/packages/graphiql-react/src/execution.tsx @@ -51,7 +51,9 @@ export function ExecutionContextProvider(props: ExecutionContextProviderProps) { updateActiveTabValues, } = useEditorContext({ nonNull: true, caller: ExecutionContextProvider }); const history = useHistoryContext(); - const autoCompleteLeafs = useAutoCompleteLeafs(); + const autoCompleteLeafs = useAutoCompleteLeafs({ + caller: ExecutionContextProvider, + }); const [isFetching, setIsFetching] = useState(false); const [subscription, setSubscription] = useState(null); const queryIdRef = useRef(0);