From 865062dc011c900a342e9603e63344eca45fc192 Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Wed, 2 Feb 2022 22:53:20 +0200 Subject: [PATCH 1/2] adding test cases --- src/react/ssr/__tests__/useLazyQuery.test.tsx | 31 ++++++++++++++++ src/react/ssr/__tests__/useQuery.test.tsx | 35 +++++++++++++++++++ 2 files changed, 66 insertions(+) diff --git a/src/react/ssr/__tests__/useLazyQuery.test.tsx b/src/react/ssr/__tests__/useLazyQuery.test.tsx index 963f9726777..018122c67b8 100644 --- a/src/react/ssr/__tests__/useLazyQuery.test.tsx +++ b/src/react/ssr/__tests__/useLazyQuery.test.tsx @@ -31,6 +31,37 @@ describe('useLazyQuery Hook SSR', () => { ] }; + it('should not execute the query and properly render the component', () => { + const link = mockSingleLink({ + request: { query: CAR_QUERY }, + result: { data: CAR_RESULT_DATA } + }); + + const client = new ApolloClient({ + cache: new InMemoryCache(), + link, + ssrMode: true + }); + + let isRendered = false; + const Component = () => { + useLazyQuery(CAR_QUERY); + isRendered = true; + return null; + }; + + const app = ( + + + + ); + + return renderToStringWithData(app).then(markup => { + expect(isRendered).toBeTruthy(); + expect(markup).toEqual(''); + }); + }); + it('should run query only after calling the lazy mode execute function', () => { const link = mockSingleLink({ request: { query: CAR_QUERY }, diff --git a/src/react/ssr/__tests__/useQuery.test.tsx b/src/react/ssr/__tests__/useQuery.test.tsx index 1abf5304366..7deffe84884 100644 --- a/src/react/ssr/__tests__/useQuery.test.tsx +++ b/src/react/ssr/__tests__/useQuery.test.tsx @@ -134,6 +134,41 @@ describe('useQuery Hook SSR', () => { }); }); + it('should skip SSR tree rendering if `fetchPolicy` option is `standby`', () => { + const link = mockSingleLink({ + request: { query: CAR_QUERY }, + result: { data: CAR_RESULT_DATA } + }); + + const client = new ApolloClient({ + cache: new InMemoryCache(), + link, + ssrMode: true + }); + + let renderCount = 0; + const Component = () => { + const { data, loading } = useQuery(CAR_QUERY, { fetchPolicy:'standby' }); + renderCount += 1; + if (!loading && data) { + const { make } = data.cars[0]; + return
{make}
; + } + return null; + }; + + const app = ( + + + + ); + + return renderToStringWithData(app).then(result => { + expect(renderCount).toBe(1); + expect(result).toEqual(''); + }); + }); + it('should skip both SSR tree rendering and SSR component rendering if `ssr` option is `false` and `ssrMode` is `true`', async () => { const link = mockSingleLink({ From 546f6309bc08e594319da8e1a9549c5977b8c9cb Mon Sep 17 00:00:00 2001 From: Ahmed Tarek Date: Sat, 7 May 2022 23:23:42 +0200 Subject: [PATCH 2/2] resolve conflicts --- src/react/hooks/useQuery.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/react/hooks/useQuery.ts b/src/react/hooks/useQuery.ts index 5faba104f6a..f5741f15170 100644 --- a/src/react/hooks/useQuery.ts +++ b/src/react/hooks/useQuery.ts @@ -434,6 +434,7 @@ class InternalState { }), [obsQuery]); const ssrAllowed = !( + this.watchQueryOptions.fetchPolicy === 'standby' || this.queryHookOptions.ssr === false || this.queryHookOptions.skip );