fix: fix fetchError persisting across different fetchers (#2653)

dylanowen · thomasheyenbrock · web-flow · commit 39b4668d4317 · 2022-09-09T22:52:49.000+02:00
* fix: fix fetchError persisting across different fetchers

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

Co-authored-by: Thomas Heyenbrock &lt;thomas.heyenbrock@gmail.com&gt;

* review comments and added a changeset

Co-authored-by: Thomas Heyenbrock &lt;thomas.heyenbrock@gmail.com&gt;
diff --git a/.changeset/friendly-flies-battle.md 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
@@ -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
@@ -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="{}" />),

Original file line number	Diff line number	Diff line change
`@@ -227,6 +227,7 @@ export function SchemaContextProvider(props: SchemaContextProviderProps) {`
`227`	`227`	`}`
`228`	`228`
`229`	`229`	`setIsFetching(true);`
	`230`	`+ setFetchError(null);`
`230`	`231`
`231`	`232`	`let result = await fetch;`
`232`	`233`