From 39b4668d43176526d37ecf07d8c86901d53e0d80 Mon Sep 17 00:00:00 2001
From: Dylan Owen <dylanowen@users.noreply.github.com>
Date: Fri, 9 Sep 2022 16:52:49 -0400
Subject: [PATCH] fix: fix fetchError persisting across different fetchers
 (#2653)

* fix: fix fetchError persisting across different fetchers

* Update packages/graphiql-react/src/schema.tsx

Co-authored-by: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>

* review comments and added a changeset

Co-authored-by: Thomas Heyenbrock <thomas.heyenbrock@gmail.com>
---
 .changeset/friendly-flies-battle.md           |  6 +++++
 packages/graphiql-react/src/schema.tsx        |  1 +
 .../components/__tests__/GraphiQL.spec.tsx    | 25 +++++++++++++++++++
 3 files changed, 32 insertions(+)
 create mode 100644 .changeset/friendly-flies-battle.md

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 154d780c70b..b9fa64b34ce 100644
--- a/packages/graphiql-react/src/schema.tsx
+++ b/packages/graphiql-react/src/schema.tsx
@@ -227,6 +227,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 24b21545664..d68fa4f7a92 100644
--- a/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
+++ b/packages/graphiql/src/components/__tests__/GraphiQL.spec.tsx
@@ -99,6 +99,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(<GraphiQL fetcher={firstFetcher} />);
+    await wait();
+
+    expect(
+      container.querySelector('.doc-explorer-contents .error-container'),
+    ).toBeTruthy();
+
+    // Re-render with valid fetcher
+    rerender(<GraphiQL fetcher={secondFetcher} />);
+    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(<GraphiQL fetcher={noOpFetcher} query="{}" />),