From f4c056a6778f62f3103cd0f29d84e2aa007d3365 Mon Sep 17 00:00:00 2001 From: Ben Newman Date: Tue, 3 May 2022 18:16:11 -0400 Subject: [PATCH 1/3] Failing regression test for skipped SSR useQuery stuck in standby. Borrowed from issue #9658, thanks to @nathanmarks. --- src/react/ssr/__tests__/useQuery.test.tsx | 50 +++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/src/react/ssr/__tests__/useQuery.test.tsx b/src/react/ssr/__tests__/useQuery.test.tsx index 0e5aacb584b..7b40ef7131a 100644 --- a/src/react/ssr/__tests__/useQuery.test.tsx +++ b/src/react/ssr/__tests__/useQuery.test.tsx @@ -184,6 +184,56 @@ describe('useQuery Hook SSR', () => { }); }); + it('should render SSR tree rendering if `skip` option is `true` for only one instance of the query', async () => { + let renderCount = 0; + + const AnotherComponent = () => { + const { + loading, + data, + } = useQuery(CAR_QUERY, { skip: false }); + + renderCount += 1; + + if (!loading) { + expect(data).toEqual(CAR_RESULT_DATA); + const { make, model, vin } = data.cars[0]; + return ( +
+ {make}, {model}, {vin} +
+ ); + } + + return null; + }; + + const Component = () => { + const { + loading, + data, + } = useQuery(CAR_QUERY, { skip: true }); + renderCount += 1; + + expect(loading).toBeFalsy(); + expect(data).toBeUndefined(); + + return ; + }; + + const app = ( + + + + ); + + return renderToStringWithData(app).then(result => { + expect(renderCount).toBe(4); + expect(result).toMatch(/Audi/); + expect(result).toMatch(/RS8/); + }); + }); + it('should return data written previously to cache during SSR pass if using cache-only fetchPolicy', async () => { const cache = new InMemoryCache({ typePolicies: { From 6db3ef267202188c69babb736ee5cd1ea0880a10 Mon Sep 17 00:00:00 2001 From: Ben Newman Date: Wed, 4 May 2022 16:49:10 -0400 Subject: [PATCH 2/3] Fix failing test of SSR useQuery stuck in skip:true-induced standby. --- src/react/hooks/useQuery.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/react/hooks/useQuery.ts b/src/react/hooks/useQuery.ts index f67bcf05615..fbacf95c26f 100644 --- a/src/react/hooks/useQuery.ts +++ b/src/react/hooks/useQuery.ts @@ -384,15 +384,15 @@ class InternalState { subscribeToMore: obsQuery.subscribeToMore.bind(obsQuery), }), [obsQuery]); - if (this.renderPromises) { - this.renderPromises.registerSSRObservable(obsQuery); + const ssrAllowed = !( + this.queryHookOptions.ssr === false || + this.queryHookOptions.skip + ); - const ssrAllowed = !( - this.queryHookOptions.ssr === false || - this.queryHookOptions.skip - ); + if (this.renderPromises && ssrAllowed) { + this.renderPromises.registerSSRObservable(obsQuery); - if (ssrAllowed && obsQuery.getCurrentResult().loading) { + if (obsQuery.getCurrentResult().loading) { // TODO: This is a legacy API which could probably be cleaned up this.renderPromises.addObservableQueryPromise(obsQuery); } From 6db0fad6d0527f67340111849fc842a83b10961e Mon Sep 17 00:00:00 2001 From: Ben Newman Date: Wed, 4 May 2022 17:10:53 -0400 Subject: [PATCH 3/3] Mention PR #9677 in CHANGELOG.md. --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 721767449a3..94ab19f52dd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,9 @@ - Update `ts-invariant` to version 0.10.2 to fix source map warnings.
[@benjamn](https://github.com/benjamn) in [#9672](https://github.com/apollographql/apollo-client/pull/9672) +- Test that `useQuery` queries with `skip: true` do not stall server-side rendering.
+ [@nathanmarks](https://github.com/nathanmarks) and [@benjamn](https://github.com/benjamn) in [#9677](https://github.com/apollographql/apollo-client/pull/9677) + ## Apollo Client 3.6.2 (2022-05-02) ### Bug Fixes