Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

useSuspenseQuery #10323

Merged
merged 159 commits into from
Dec 9, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
159 commits
Select commit Hold shift + click to select a range
a0665ee
fix(regression): avoid calling `useQuery` `onCompleted` for cache wri…
alessbell Oct 27, 2022
9d77dd2
Write the first failing test for useSuspenseQuery
jerelmiller Nov 4, 2022
9f582ff
Add extremely basic implementation to get a suspense query working
jerelmiller Nov 4, 2022
3fd7874
Use MockedProvider for test
jerelmiller Nov 4, 2022
e6d0f87
Add jest-dom for tests
jerelmiller Nov 4, 2022
8770c15
Use toBeInTheDocument matcher for suspense query
jerelmiller Nov 4, 2022
ae1e414
Minor tweak to test name
jerelmiller Nov 4, 2022
ce07b6e
Rename useSuspenseQuery to useSuspenseQuery_experimental
jerelmiller Nov 4, 2022
4c885b6
Export useSuspenseQuery
jerelmiller Nov 4, 2022
79fda62
Add test to validate suspense works with variables
jerelmiller Nov 4, 2022
b027aa1
Limit result to data and variables for now
jerelmiller Nov 4, 2022
74493ef
Skip useSuspenseQuery TODO tests
jerelmiller Nov 4, 2022
9a46d24
Add check to verify document type
jerelmiller Nov 7, 2022
44c8810
Add a suspense cache and ensure it checks for it
jerelmiller Nov 7, 2022
367343c
Add suspenseCache to MockedProvider
jerelmiller Nov 7, 2022
f3d5ab3
Add ability to resuspend when a query changes variables
jerelmiller Nov 7, 2022
78e9e6a
Add a test to verify same variables returns same results
jerelmiller Nov 7, 2022
2bc01da
Minor tweak to order of tests
jerelmiller Nov 7, 2022
e1fe389
Rework suspense cache and implementation a bit
jerelmiller Nov 8, 2022
9e67ddf
Add ability to skip suspense when variables change
jerelmiller Nov 8, 2022
e0ce47c
Use patch-package to add renderHook to @testing-library/react-12
jerelmiller Nov 8, 2022
c92fe71
Use renderHook exported from @testing-library/react
jerelmiller Nov 8, 2022
b3bd05c
Rewrite useSuspenseQuery tests with renderHook
jerelmiller Nov 8, 2022
51a4924
Update suspense query options to a more limited set
jerelmiller Nov 8, 2022
f8aa4ba
Limit the fetch policies available for useSuspenseQuery
jerelmiller Nov 9, 2022
c24ed8f
Update tests to check component resuspends when changing variables fo…
jerelmiller Nov 9, 2022
dbbc9ba
Create a helper to render base case hook
jerelmiller Nov 9, 2022
60a901b
Add prettier and config but only for a few files
jerelmiller Nov 10, 2022
4c479c5
Run prettier on allowed files
jerelmiller Nov 10, 2022
5989879
Pin prettier to exact version
jerelmiller Nov 10, 2022
afc19bc
Add test to validate fetch is called correct number of times
jerelmiller Nov 10, 2022
cc1c65d
Ensure changing variables suspends properly
jerelmiller Nov 10, 2022
257dd5a
Remove sanity check test
jerelmiller Nov 10, 2022
5822718
Minor adjustments to tests
jerelmiller Nov 10, 2022
9bda93a
Add ability to re-suspend when changing queries
jerelmiller Nov 10, 2022
67a813a
Update name of test to better reflect what its testing
jerelmiller Nov 10, 2022
9c474d8
Remove auto test setup for all fetch policies
jerelmiller Nov 10, 2022
3e4d95c
Add validation to ensure support fetch policy is used
jerelmiller Nov 10, 2022
7899824
Ensure default fetch policy is used for validation
jerelmiller Nov 10, 2022
def002d
Simpler test to better focus on its purpose
jerelmiller Nov 10, 2022
19779ff
Better type for renderSuspenseHook
jerelmiller Nov 10, 2022
c17ecc9
Add missing DEFAULT_FETCH_POLICY constant
jerelmiller Nov 10, 2022
f844d83
Fix type of previous opts ref
jerelmiller Nov 10, 2022
bdb8199
Fix incorrect test assertion
jerelmiller Nov 10, 2022
838e0ef
Minor change to order of tests
jerelmiller Nov 10, 2022
c629212
Add test to ensure referential equality is maintained
jerelmiller Nov 10, 2022
9e8e2ea
Add test to validate observable is torn down on unmount
jerelmiller Nov 10, 2022
fa67285
Ensure suspense cache removes observable when town down
jerelmiller Nov 10, 2022
2f6a9c2
Add test to validate suspense cache keeps query if used by others
jerelmiller Nov 10, 2022
df25fe1
Ensure useSuspenseQuery works properly with network-only fetch policy
jerelmiller Nov 11, 2022
3fd11e2
Refactor tests to move some of the common test setup into own functions
jerelmiller Nov 11, 2022
654fae8
Add tests to verify no-cache fetch policy works correctly
jerelmiller Nov 11, 2022
6acd59b
Add tests to validate cache-and-network fetch policy works correctly
jerelmiller Nov 11, 2022
2166ca4
Don't support standby fetch policy for now
jerelmiller Nov 11, 2022
fa037a0
Add test to verify client can be overridden
jerelmiller Nov 11, 2022
3ac3792
Add tests to verify cache is written properly
jerelmiller Nov 11, 2022
97a1e78
Handle when to suspend based on fetch policy and data in the cache
jerelmiller Nov 11, 2022
524d2cb
Rename opts to watchQueryOptions and use better type
jerelmiller Nov 11, 2022
e48f3e4
More robust test for checking overridden client
jerelmiller Nov 11, 2022
1c1a4a8
More robust way to check how many times a component suspended
jerelmiller Nov 11, 2022
274df39
Add ability to only suspend on initial fetch
jerelmiller Nov 11, 2022
047448d
Add missing imports and missed rename
jerelmiller Nov 11, 2022
11e9f7d
Add test to verify no-cache maintains result on rerender
jerelmiller Nov 11, 2022
df6d041
Use fetch policy from client default options if available
jerelmiller Nov 11, 2022
65169f6
Ensure SuspensePolicy type is exported from types
jerelmiller Nov 11, 2022
0671b79
Add ability to use default variables from client
jerelmiller Nov 11, 2022
d68f226
Remove unnecessary console.log
jerelmiller Nov 11, 2022
06753a3
Simplify test that uses custom wrapper
jerelmiller Nov 11, 2022
8026019
Add test and implementation to merge global and local variables
jerelmiller Nov 11, 2022
d21bac5
Add implementation to make sure variables can be removed
jerelmiller Nov 12, 2022
18b8538
Add check to ensure useSuspenseQuery suspends immediately
jerelmiller Nov 14, 2022
04a9008
Add check to ensure suspense cache is defined
jerelmiller Nov 14, 2022
bd0d137
Minor tweak to test name
jerelmiller Nov 14, 2022
9048d21
Add tests to ensure useSuspenseQuery responds to cache updates
jerelmiller Nov 14, 2022
b6ffe3f
Add test to ensure context is pased to link chain
jerelmiller Nov 14, 2022
0ad0f8f
Throw errors when the result is an error
jerelmiller Nov 14, 2022
3ca8a6e
Add react-error-boundary for tests
jerelmiller Nov 14, 2022
48834a8
Add support for ignore and none error policies
jerelmiller Nov 14, 2022
f57d899
Better test setup to distinguish between network errors and graphql e…
jerelmiller Nov 15, 2022
980ccc5
Add implementation to work with errorPolicy = "all"
jerelmiller Nov 15, 2022
2339876
Handle GraphQL errors with all error policies
jerelmiller Nov 15, 2022
4006da8
Add error to result checked in tests
jerelmiller Nov 15, 2022
2d85acc
Add tests to ensure partial data results are returned with errors
jerelmiller Nov 16, 2022
cf5c2f5
Add test to ensure error is persisted between renders
jerelmiller Nov 16, 2022
528fb4d
Add tests to ensure multiple GraphQL errors are handled
jerelmiller Nov 16, 2022
f6e0964
Add test to ensure errors are removed when changing variables
jerelmiller Nov 16, 2022
cbbbe89
Add test to ensure canonizeResults works as expected
jerelmiller Nov 16, 2022
3d09030
Bump wait time to help with flaky test
jerelmiller Nov 16, 2022
1998491
Add ability to return partial result data from the cache
jerelmiller Nov 16, 2022
541aaad
Add additional supported options to suspense query hook type
jerelmiller Nov 16, 2022
3b7a87c
Refactor to use it.each to reduce duplication of some tests
jerelmiller Nov 17, 2022
f339d3a
Use client.writeQuery in test since its more synchronous
jerelmiller Nov 17, 2022
aa035cb
Switch to toMatchObject expectation to check subset of return value
jerelmiller Nov 17, 2022
565c1eb
Implement refetch ability with useSuspenseQuery
jerelmiller Nov 18, 2022
a95a19e
Minor tweaks to test setup
jerelmiller Nov 18, 2022
db01528
Add implementation to throw an error after refetch returns error
jerelmiller Nov 18, 2022
35354c2
Add tests to check error behavior when calling refetch
jerelmiller Nov 18, 2022
f34040f
Add test to validate partial data results for refetch
jerelmiller Nov 18, 2022
13cd91c
Add support for fetchMore with useSuspenseQuery
jerelmiller Nov 19, 2022
49a22aa
Add test to validate nextFetchPolicy is applied after initial suspense
jerelmiller Nov 21, 2022
2c5c9ba
Add tests to verify refetchWritePolicy is honored
jerelmiller Nov 21, 2022
2125c17
Add test verifying observable is unsubscribed properly
jerelmiller Nov 22, 2022
f7310e5
Ignore useSuspenseQuery tests in React 17
jerelmiller Nov 22, 2022
bb24127
Ensure TVariables is passed to TypedDocumentNode in getQuery
jerelmiller Nov 23, 2022
3712a8c
Rename resolved property to fulfilled
jerelmiller Nov 28, 2022
118dd62
Check to ensure result for same variables is the same object
jerelmiller Nov 29, 2022
8e9d66c
Add test to validate multiple refetches result in suspensions
jerelmiller Nov 29, 2022
b4d17d1
Allow suspenseCache in renderSuspenseHook helper
jerelmiller Nov 29, 2022
4d7fb8c
Add check of render count on multiple refetch
jerelmiller Nov 29, 2022
5e95086
Fix issue where a component was rendered before the promise resolved
jerelmiller Nov 29, 2022
4b6a63b
Remove variables from the result of useSuspenseQuery
jerelmiller Nov 29, 2022
c99b30d
Fix missing import
jerelmiller Nov 29, 2022
fb320cd
Always run validations in dev
jerelmiller Nov 29, 2022
fe322da
Add test to verify observable not over subscribed
jerelmiller Nov 30, 2022
29f3d39
Add fix for rejected promise causing issue with test
jerelmiller Nov 30, 2022
2c5d044
Simplify suspense cache entry
jerelmiller Nov 30, 2022
ecda316
Wrap refetch/fetchMore in act to remove warnings
jerelmiller Nov 30, 2022
33152ce
Use destructured values in useEffect
jerelmiller Nov 30, 2022
5852eda
Refactor useDeepMemo into its own hook file
jerelmiller Nov 30, 2022
23a2569
Add tests for useDeepMemo
jerelmiller Nov 30, 2022
1ca9df1
Remove unused import
jerelmiller Nov 30, 2022
57f7ed0
Simplify condition for setting network status
jerelmiller Nov 30, 2022
993f86d
Use entire watchQueryOptions in useEffect since its used
jerelmiller Nov 30, 2022
bd82501
Rename ref for clarity
jerelmiller Nov 30, 2022
72b8014
Extract custom hook for checking whether component is suspended
jerelmiller Nov 30, 2022
9c59615
Extract custom hook to get watch query options
jerelmiller Nov 30, 2022
c88be2b
Remove old logic for checking suspended ref
jerelmiller Nov 30, 2022
68737fc
Move validation to useWatchQueryOptions
jerelmiller Nov 30, 2022
87edd05
Use destructured value
jerelmiller Nov 30, 2022
a1cb546
Update API for suspense cache
jerelmiller Nov 30, 2022
968dad9
Consolidate subscription handlers since they are the same implementation
jerelmiller Nov 30, 2022
f0b958d
Use variable when deleting entry from the suspense cache
jerelmiller Nov 30, 2022
9cf1658
Fix issue where fetchPolicy was overwritten when using nextFetchPolic…
jerelmiller Nov 30, 2022
3f86e7b
Move logic of getting result from observable into own hook
jerelmiller Nov 30, 2022
3f829ca
Rename isSuspendedRef to isMountedRef for better clarity
jerelmiller Nov 30, 2022
b1e2223
Use variable to reduce typing
jerelmiller Dec 1, 2022
fb2c83a
Always remove previous query/variables from suspense cache when they …
jerelmiller Dec 1, 2022
c7ce42b
Combine effects to remove suspense cache entries
jerelmiller Dec 1, 2022
f412fc4
Fix regression on removing cache entry too soon
jerelmiller Dec 1, 2022
071d978
Allow prettier to work on internal hooks
jerelmiller Dec 1, 2022
cf729e8
Add test to ensure no network request for cache-first
jerelmiller Dec 1, 2022
1154a72
Refactor logic for determining when to suspend
jerelmiller Dec 1, 2022
dd9a3c3
Update bundle size
jerelmiller Dec 1, 2022
7cd6fc1
Update snapshot test
jerelmiller Dec 1, 2022
731a54f
Fix typos in prettierignore
jerelmiller Dec 1, 2022
e0f1c97
Remove the check for parent suspense cache in ApolloProvider
jerelmiller Dec 1, 2022
4ee5a6a
Warn when using no-cache fetch policy with returnPartialData
jerelmiller Dec 1, 2022
5f13ea6
Add test to ensure cache-first suspends with partial data
jerelmiller Dec 1, 2022
01584d5
Add additional variable to better show intent of logic
jerelmiller Dec 2, 2022
13f5f2d
Add option to watchQuery that disables fetch on the first subscription
jerelmiller Dec 3, 2022
563d287
Make useSuspenseQuery more robust by removing some patch cases by set…
jerelmiller Dec 3, 2022
f735657
Add comment explaining use of fetchOnFirstSubscribe
jerelmiller Dec 3, 2022
be9595f
Move promise inline
jerelmiller Dec 4, 2022
ba70c6c
Add changeset
jerelmiller Dec 8, 2022
f4e0ece
Update bundlesize
jerelmiller Dec 8, 2022
8a8d454
Update package-lock.json
jerelmiller Dec 8, 2022
23aa7fa
Fix typos in test comments
jerelmiller Dec 9, 2022
5ae7138
Remove inaccurate comment
jerelmiller Dec 9, 2022
5212938
Pin patch-package to a specific version
jerelmiller Dec 9, 2022
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/small-timers-shake.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@apollo/client': minor
---

Add support for React suspense with a new `useSuspenseQuery` hook.
35 changes: 35 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,6 +1,41 @@
##### DISCLAIMER ######
# We have disabled the use of prettier in this project for a variety of reasons.
# Because much of this project has not been formatted, we don't want to want to
# apply formatting to everything and skew `git blame` stats. Instead, we should
# only format newly created files that we can guarantee have no existing git
# history. For this reason, we have disabled prettier project-wide except for
# a handful of files.
#
# ONLY ADD NEWLY CREATED FILES/PATHS TO THE LIST BELOW. DO NOT ADD EXISTING
# PROJECT FILES.

# ignores all files in /docs directory
/docs/**

# Ignore all mdx & md files:
*.mdx
*.md

# Do not format anything automatically except files listed below
/*

##### PATHS TO BE FORMATTED #####
!src/
src/*
!src/react/
src/react/*

# Allow src/react/cache
!src/react/cache/

## Allowed React Hooks
!src/react/hooks/
src/react/hooks/*
!src/react/hooks/internal
!src/react/hooks/useSuspenseCache.ts
!src/react/hooks/useSuspenseQuery.ts

## Allowed React hook tests
!src/react/hooks/__tests__/
src/react/hooks/__tests__/*
!src/react/hooks/__tests__/useSuspenseQuery.test.tsx
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
## Apollo Client 3.8.0

### Bug fixes

- Avoid calling `useQuery` `onCompleted` callback after cache writes, only after the originating query's network request(s) complete. <br/>
[@alessbell](https://github.com/alessbell) in [#10229](https://github.com/apollographql/apollo-client/pull/10229)

## Apollo Client 3.7.2 (2022-12-06)

### Improvements
Expand Down
2 changes: 1 addition & 1 deletion config/bundlesize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { join } from "path";
import { gzipSync } from "zlib";
import bytes from "bytes";

const gzipBundleByteLengthLimit = bytes("31.87KB");
const gzipBundleByteLengthLimit = bytes("32.79KB");
const minFile = join("dist", "apollo-client.min.cjs");
const minPath = join(__dirname, "..", minFile);
const gzipByteLen = gzipSync(readFileSync(minPath)).byteLength;
Expand Down
11 changes: 9 additions & 2 deletions config/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const defaults = {
rootDir: "src",
preset: "ts-jest",
testEnvironment: "jsdom",
setupFiles: ["<rootDir>/config/jest/setup.ts"],
setupFilesAfterEnv: ["<rootDir>/config/jest/setup.ts"],
testEnvironmentOptions: {
url: "http://localhost",
},
Expand All @@ -25,6 +25,13 @@ const defaults = {
const ignoreTSFiles = '.ts$';
const ignoreTSXFiles = '.tsx$';

const react17TestFileIgnoreList = [
ignoreTSFiles,
// For now, we only support useSuspenseQuery with React 18, so no need to test
// it with React 17
'src/react/hooks/__tests__/useSuspenseQuery.test.tsx'
]

const react18TestFileIgnoreList = [
// ignore core tests (.ts files) as they are run separately
// to avoid running them twice with both react versions
Expand Down Expand Up @@ -68,7 +75,7 @@ const standardReact18Config = {
const standardReact17Config = {
...defaults,
displayName: "ReactDOM 17",
testPathIgnorePatterns: [ignoreTSFiles],
testPathIgnorePatterns: react17TestFileIgnoreList,
moduleNameMapper: {
"^react$": "react-17",
"^react-dom$": "react-dom-17",
Expand Down