From febed91d1353799f227d36a2f4915945b7c58c3c Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 21 Mar 2020 22:40:38 +0100 Subject: [PATCH 1/9] fix react unmounted warning --- packages/react-urql/src/hooks/useSource.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/react-urql/src/hooks/useSource.ts b/packages/react-urql/src/hooks/useSource.ts index e9bc42b347..a57bfafb87 100644 --- a/packages/react-urql/src/hooks/useSource.ts +++ b/packages/react-urql/src/hooks/useSource.ts @@ -1,6 +1,6 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { useMemo, useEffect, useState } from 'react'; +import { useMemo, useEffect, useState, useRef } from 'react'; import { Source, @@ -19,6 +19,8 @@ import { useClient } from '../context'; let currentInit = false; export const useSource = (source: Source, init: T): T => { + const isMounted = useRef(true); + const [state, setState] = useState(() => { currentInit = true; let initialValue = init; @@ -35,11 +37,17 @@ export const useSource = (source: Source, init: T): T => { return initialValue; }); + useEffect(() => { + return () => { + isMounted.current = false; + } + }) + useEffect(() => { return pipe( source, subscribe(value => { - if (!currentInit) { + if (!currentInit && isMounted.current) { setState(value); } }) From f9adc8fe1509db4dcb5bba1d06b8ea58801013ee Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 21 Mar 2020 22:47:56 +0100 Subject: [PATCH 2/9] add mounted check to useMutation --- packages/react-urql/src/hooks/useMutation.ts | 25 +++++++++++++------- 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/react-urql/src/hooks/useMutation.ts b/packages/react-urql/src/hooks/useMutation.ts index a0c2a789ef..0b59c4920a 100644 --- a/packages/react-urql/src/hooks/useMutation.ts +++ b/packages/react-urql/src/hooks/useMutation.ts @@ -1,5 +1,5 @@ import { DocumentNode } from 'graphql'; -import { useState, useCallback } from 'react'; +import { useState, useCallback, useRef, useEffect } from 'react'; import { pipe, toPromise } from 'wonka'; import { @@ -31,6 +31,7 @@ export type UseMutationResponse = [ export const useMutation = ( query: DocumentNode | string ): UseMutationResponse => { + const isMounted = useRef(true); const client = useClient(); const [state, setState] = useState>(initialState); @@ -46,18 +47,26 @@ export const useMutation = ( ), toPromise ).then(result => { - setState({ - fetching: false, - stale: !!result.stale, - data: result.data, - error: result.error, - extensions: result.extensions, - }); + if (isMounted.current) { + setState({ + fetching: false, + stale: !!result.stale, + data: result.data, + error: result.error, + extensions: result.extensions, + }); + } return result; }); }, [client, query, setState] ); + useEffect(() => { + return () => { + isMounted.current = false; + }; + }, []); + return [state, executeMutation]; }; From a17b61d01eb815e3dafc1e9677902f43db0d6dd1 Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 21 Mar 2020 22:48:34 +0100 Subject: [PATCH 3/9] add changeset --- .changeset/few-squids-poke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/few-squids-poke.md diff --git a/.changeset/few-squids-poke.md b/.changeset/few-squids-poke.md new file mode 100644 index 0000000000..e37b62469c --- /dev/null +++ b/.changeset/few-squids-poke.md @@ -0,0 +1,5 @@ +--- +'urql': patch +--- + +Avoid setting state on an unmounted component when useMutation is used From e480445fc73f74125ed8f503fcc03f1d85890bae Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 21 Mar 2020 22:54:25 +0100 Subject: [PATCH 4/9] run linter --- packages/react-urql/src/hooks/useSource.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-urql/src/hooks/useSource.ts b/packages/react-urql/src/hooks/useSource.ts index a57bfafb87..ffc9a0939d 100644 --- a/packages/react-urql/src/hooks/useSource.ts +++ b/packages/react-urql/src/hooks/useSource.ts @@ -40,8 +40,8 @@ export const useSource = (source: Source, init: T): T => { useEffect(() => { return () => { isMounted.current = false; - } - }) + }; + }, []); useEffect(() => { return pipe( From cd4ab1e389b937a1c12626778cf3d2f280ef40e7 Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 21 Mar 2020 23:00:19 +0100 Subject: [PATCH 5/9] add the .js to svelte again --- packages/svelte-urql/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte-urql/package.json b/packages/svelte-urql/package.json index 86e23d1e7d..712dbf8b41 100644 --- a/packages/svelte-urql/package.json +++ b/packages/svelte-urql/package.json @@ -19,7 +19,7 @@ "exchanges", "svelte" ], - "main": "dist/urql-svelte", + "main": "dist/urql-svelte.js", "module": "dist/urql-svelte.mjs", "types": "dist/types/index.d.ts", "source": "src/index.ts", From 63e7759c94564de08d06e17616d0d3d86ff6dedf Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 21 Mar 2020 23:01:37 +0100 Subject: [PATCH 6/9] undo last commit --- packages/svelte-urql/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/svelte-urql/package.json b/packages/svelte-urql/package.json index 712dbf8b41..86e23d1e7d 100644 --- a/packages/svelte-urql/package.json +++ b/packages/svelte-urql/package.json @@ -19,7 +19,7 @@ "exchanges", "svelte" ], - "main": "dist/urql-svelte.js", + "main": "dist/urql-svelte", "module": "dist/urql-svelte.mjs", "types": "dist/types/index.d.ts", "source": "src/index.ts", From 68bacb5a528b3849469240f47a6fe5fbb1d74eb6 Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 21 Mar 2020 23:04:30 +0100 Subject: [PATCH 7/9] add .js for suspense --- exchanges/suspense/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exchanges/suspense/package.json b/exchanges/suspense/package.json index be5abfff90..6c9f5d45fc 100644 --- a/exchanges/suspense/package.json +++ b/exchanges/suspense/package.json @@ -19,7 +19,7 @@ "react", "suspense" ], - "main": "dist/urql-exchange-suspense", + "main": "dist/urql-exchange-suspense.js", "module": "dist/urql-exchange-suspense.mjs", "types": "dist/types/index.d.ts", "source": "src/index.ts", From be98c7b52d306478082bf0624f644f9d22616748 Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sat, 21 Mar 2020 23:36:05 +0100 Subject: [PATCH 8/9] remove react peerDep from retry --- exchanges/retry/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/exchanges/retry/package.json b/exchanges/retry/package.json index d1e3e2b9b8..78a2514576 100644 --- a/exchanges/retry/package.json +++ b/exchanges/retry/package.json @@ -56,8 +56,7 @@ "react-dom": "^16.13.0" }, "peerDependencies": { - "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0", - "react": ">= 16.8.0" + "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0" }, "dependencies": { "@urql/core": ">=1.10.4", From 60246ae447eb3838f48e2aa2c10d757f61f8a850 Mon Sep 17 00:00:00 2001 From: jdecroock Date: Sun, 22 Mar 2020 00:33:21 +0100 Subject: [PATCH 9/9] fix prepare script --- exchanges/suspense/package.json | 2 +- scripts/prepare/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/exchanges/suspense/package.json b/exchanges/suspense/package.json index 6c9f5d45fc..c61d4b9cdb 100644 --- a/exchanges/suspense/package.json +++ b/exchanges/suspense/package.json @@ -20,7 +20,7 @@ "suspense" ], "main": "dist/urql-exchange-suspense.js", - "module": "dist/urql-exchange-suspense.mjs", + "module": "dist/urql-exchange-suspense.es.js", "types": "dist/types/index.d.ts", "source": "src/index.ts", "exports": { diff --git a/scripts/prepare/index.js b/scripts/prepare/index.js index d2dafe7836..992b505de0 100755 --- a/scripts/prepare/index.js +++ b/scripts/prepare/index.js @@ -42,7 +42,7 @@ if (hasReact) { invariant( path.normalize(pkg.module) === `dist/${name}.es.js`, - 'package.json:main path must end in `.es.js` for packages depending on React.' + 'package.json:module path must end in `.es.js` for packages depending on React.' ); } else { invariant(