diff --git a/.changeset/friendly-flies-battle.md b/.changeset/friendly-flies-battle.md
new file mode 100644
index 00000000000..094ee40d3cc
--- /dev/null
+++ b/.changeset/friendly-flies-battle.md
@@ -0,0 +1,6 @@
+---
+'graphiql': patch
+'@graphiql/react': patch
+---
+
+Fix `fetchError` not being cleared when a new `fetcher` is used
diff --git a/packages/graphiql-react/src/schema.tsx b/packages/graphiql-react/src/schema.tsx
index 98a1c53147f..d439aca08ef 100644
--- a/packages/graphiql-react/src/schema.tsx
+++ b/packages/graphiql-react/src/schema.tsx
@@ -168,6 +168,7 @@ export function SchemaContextProvider(props: SchemaContextProviderProps) {
}
setIsFetching(true);
+ setFetchError(null);
let result = await fetch;
diff --git a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
index 3ef6d1a9a66..19d9229cb5e 100644
--- a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
+++ b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
@@ -98,6 +98,31 @@ describe('GraphiQL', () => {
expect(secondCalled).toEqual(true);
});
+ it('should refresh schema with new fetcher after a fetchError', async () => {
+ function firstFetcher() {
+ return Promise.reject('Schema Error');
+ }
+ function secondFetcher() {
+ return Promise.resolve(simpleIntrospection);
+ }
+
+ // Use a bad fetcher for our initial render
+ const { rerender, container } = render();
+ await wait();
+
+ expect(
+ container.querySelector('.doc-explorer-contents .error-container'),
+ ).toBeTruthy();
+
+ // Re-render with valid fetcher
+ rerender();
+ await wait();
+
+ expect(
+ container.querySelector('.doc-explorer-contents .error-container'),
+ ).not.toBeTruthy();
+ });
+
it('should not throw error if schema missing and query provided', () => {
expect(() =>
render(),