[WIP] Add client side support for @defer directive #3686

clarencenpy · 2018-07-13T23:51:53Z

Changes:

Merge deferred patches with the initial response and write to cache
Merge deferred errors into queryStore
Expose field-level loading states for deferred queries in loadingState
New networkStatus for deferred queries that are still streaming

This depends on an alpha release of apollo-link-dedup #714.

hwillson

This is looking AMAZING @clarencenpy! See my comments inline (nothing major). Thanks!

hwillson · 2018-07-19T14:24:43Z

packages/apollo-client/src/core/QueryManager.ts

+              // If loadingState is present, this is a patch from a deferred
+              // query, and we should always treat it as a different result
+              // even though the actual data might be the same (i.e. the patch's
+              // data could be null.


Missing closing ")" in comment.

hwillson · 2018-07-19T14:30:59Z

packages/apollo-client/src/core/QueryManager.ts

+ * Recursive function that extracts a tree that mirrors the shape of the query,
+ * adding _loading property to fields which are deferred.
+ */
+function extractDeferredFieldsToTree(


Regarding extractDeferredFieldsToTree and initDeferredFieldLoadingStates, I see they're defined as utility functions outside of the QueryManager class. I don't really have any issues with this, but since the rest of the QueryManager functionality is already defined in the class, would you mind moving these into QueryManager as private functions?

hwillson · 2018-07-19T14:31:25Z

packages/apollo-client/src/core/networkStatus.ts

+   * Only a partial response has been received, this could come from the usage
+   * of @defer/live/stream directives.
+   */
+  partial = 9,


This is sooooo exciting! 🎉

hwillson · 2018-07-19T14:36:49Z

packages/apollo-client/src/core/networkStatus.ts

@@ -52,5 +58,5 @@ export enum NetworkStatus {
 export function isNetworkRequestInFlight(
  networkStatus: NetworkStatus,
 ): boolean {
-  return networkStatus < 7;
+  return networkStatus < 7 || networkStatus === 9;


This is going to pose a bit of an interesting problem. I've seen a lot of 3rd party code that is using the networkStatus < 7 check to see if a request is in flight. It's too bad the NetworkStatus enum wasn't originally defined using increments of 10, so the partial status could have been added just after poll (so poll at 60, partial at 61). That being said, progress is progress - there isn't much we can do here for now, so 👍.

hwillson · 2018-07-19T14:37:45Z

packages/apollo-client/src/core/types.ts

+
+/**
+ * Define a new type for patches that are sent as a result of using defer.
+ * Its is basically the same as ExecutionResult, except that it has a "path"


Small grammar issue - should be "It is".

hwillson · 2018-07-19T14:42:06Z

packages/apollo-client/src/core/types.ts

+ * field that keeps track of the where the patch is to be merged with the
+ * original result.
+ */
+export interface ExecutionPatchResult {


It looks like ExecutionPatchResult is very similar to ExecutionResult (just adds path). You might be able to extend the ExecutionResult interface instead?

hwillson · 2018-07-19T14:45:42Z

packages/apollo-client/src/data/queries.ts

@@ -11,6 +13,8 @@ export type QueryStoreValue = {
  networkStatus: NetworkStatus;
  networkError?: Error | null;
  graphQLErrors?: GraphQLError[];
+  _loadingState?: Record<string, any>;
+  loadingState?: Record<string, any>;


Could we avoid the underscore naming here - seeing both _loadingState and loadingState is a bit confusing. Maybe _loadingState should be called something like originalLoadingState?

hwillson · 2018-07-19T14:47:20Z

packages/apollo-client/src/data/queries.ts

+ * The structure of this will mirror the response data, with deferred fields
+ * set to undefined until its patch is received.
+ */
+function compactLoadingStateTree(


Same comment as earlier - would you mind moving this into the QueryStore class, as a private function?

hwillson · 2018-07-19T14:49:06Z

packages/apollo-client/src/data/store.ts

+    patch: ExecutionPatchResult,
+  ): void {
+    if (patch.errors) {
+    }


I'm assuming this is because these changes are in alpha state, but just calling this out as a reminder. Something needs to be done with patch.errors.

The logic to do that is in queries.ts, where I merge errors for each patch into the graphQLErrors array. My bad, forgot to take this out.

The existing page for "Add React to a New App" (previously; now broken: https://reactjs.org/docs/add-react-to-a-new-app.html) has been moved to https://reactjs.org/docs/create-a-new-react-app.html. This updates the documentation to accommodate that change!

The motivation behind this is the need to distinguish between "pending" or "null" states for deferred fields.

This allows us to omit `children` from the access path.

Even though the actual data might look the same (i.e. the patched data is null)

@defer

@defer must be specified for all of the selections, matching up with the behavior of Apollo Server.

- apollo-boost@0.2.0-alpha.0 - apollo-cache-inmemory@1.2.6-alpha.0 - apollo-cache@1.1.13-alpha.0 - apollo-client@2.4.0-alpha.0 - apollo-utilities@1.0.17-alpha.0 - graphql-anywhere@4.1.15-alpha.0

# Conflicts: # docs/source/features/defer-support.md # packages/apollo-client/package.json # packages/apollo-client/src/core/QueryManager.ts

- apollo-boost@0.2.0-alpha.14 - apollo-cache-inmemory@1.2.6-alpha.14 - apollo-cache@1.1.13-alpha.14 - apollo-client@2.4.0-alpha.14 - apollo-utilities@1.0.17-alpha.14 - graphql-anywhere@4.1.15-alpha.14

Fixed

apollo-cla · 2018-08-09T00:42:29Z

	Warnings
⚠️	❗ Big PR
⚠️	There are library changes, but not tests. That's OK as long as you're refactoring existing code

Generated by 🚫 dangerJS

rmosolgo · 2019-03-05T03:18:57Z

👋 Hi! Is this something that you all are still working on? I'd love to use @defer but I've been having some trouble with the last releases of it. Could I help by getting it up-to-date with the new 2.5 release?

Yalian · 2019-07-30T21:24:57Z

some update for this feature? 🤓

sorenhoyer · 2019-09-01T06:46:30Z

Defer will add so much value... Anyone working on this? 1 year later... what's blocking this? :-)

hwillson · 2019-09-04T14:34:34Z

Fully integrated production @defer support is coming in the not too distant future, but it won't be part of Apollo Client 3.0. Both Apollo Client and Apollo Server are undergoing major infrastructure and functionality changes for their 3.0 releases, a lot of which is intended to lay a better foundation for @defer and @stream support. When AC/AS are ready, the great work done in the PR will be reviewed and adjusted as needed, to get first class @defer support in place. Closing for now - thanks!

lukejagodzinski · 2019-11-19T01:44:59Z

@hwillson Any rough approximation of the featuring landing? 2019 or 2020?

hwillson · 2019-11-19T02:40:24Z

@lukejagodzinski I think it's safe to say 2020 as this point. @defer and @stream support is coming, but it has been back-burnered a bit.

lukejagodzinski · 2019-11-19T13:41:06Z

@hwillson thanks, but early 2020, mid, or late? :D

It's also a little bit misleading to watch some videos about @defer on YT, see it in some places in docs, read article about it from 2018 and still not being able to test even experimental version :). I'm just saying, that after seeing so many old news about that, I assumed that this feature was already implemented. Until I digged deeper :). Maybe, it could be mentioned in the docs that this feature is still WIP? Just create a new section in docs, so anyone who will encounter news about @defer and go to the docs, will see that it's not implemented yet :)

hwillson · 2019-11-19T14:33:43Z

Thanks @lukejagodzinski - great point. We had a defer section in the docs, but we removed it when work on @defer stopped (so we weren't misleading people with regards to how complete the feature was). We'll look into getting a note about @defer back in the docs. Regarding when it will be ready in 2020, that's a great question. To be honest that decision is dependent on when @defer support is ready in Apollo Server, and Apollo Server is undergoing a lot of great changes for v3. We'll be diving back into @defer after AS 3 launches, as some of the v3 changes are required to build a proper @defer / @stream experience.

As for when AS 3 is launching, I just asked the server team and they told me ... 2020 🙂.

For more specific details around AS 3 and @defer support, I'd suggest joining in the roadmap discussion.

lukejagodzinski · 2019-11-20T08:38:40Z

@hwillson ok thanks! :) Can't wait for it :) Keep doing great work!

fabis94 · 2020-12-10T17:38:43Z

Any updates here? Looks like there hasn't been any activity for a year neither here nor in the Apollo Server repo

KatFishSnake · 2021-05-14T00:22:37Z

@fabis94 i hope that graphql/graphql-js#2839 is the next step for this PR

hwillson · 2021-05-14T00:34:22Z

@KatFishSnake this work is now being tracked in #8184, and will be part of Apollo Client 4.

clarencenpy requested review from jbaxleyiii and hwillson July 16, 2018 20:14

clarencenpy force-pushed the defer-support branch 2 times, most recently from f92550b to 1c08016 Compare July 17, 2018 19:40

clarencenpy mentioned this pull request Jul 17, 2018

[WIP] Add @defer support apollographql/react-apollo#2192

Closed

2 tasks

clarencenpy changed the title ~~[WIP] Add client side support for @defer directive~~ Add client side support for @defer directive Jul 18, 2018

apollographql deleted a comment from apollo-cla Jul 18, 2018

clarencenpy force-pushed the defer-support branch from 0eb55e0 to bc2ef68 Compare July 19, 2018 06:44

apollographql deleted a comment from apollo-cla Jul 19, 2018

hwillson previously requested changes Jul 19, 2018

View reviewed changes

apollographql deleted a comment from apollo-cla Jul 20, 2018

dandv and others added 18 commits July 23, 2018 06:40

Pagination: fix typo

20c88eb

Merge deferred patches with the initial ExecutionResult

61bd8a6

Expose a loadingState tree for deferred queries

806dec6

The motivation behind this is the need to distinguish between "pending" or "null" states for deferred fields.

Improved DX by exposing a proxied version of the loadingState tree

df030b8

This allows us to omit `children` from the access path.

Deep freeze all fields on resultFromStore except loadingState

fbf74f7

Improved DX, omit _isLoaded from the access path

195e779

Handle inline fragments in query

b578bf6

Remove usage of Proxy and just return a compacted loadingState tree

7238f05

Use experimental release of apollo-link-dedup

ab3a3bd

Handle FragmentSpreads in the query

b6f32dd

Always treat patches returning a different result

aafe10b

Even though the actual data might look the same (i.e. the patched data is null)

Handle fields on fragment spreads that already exist in selectionSet

b4069cb

@defer must be specified for all of the selections, matching up with the behavior of Apollo Server.

Pass a flag to indicated deferred queries to the link stack

dc56ccb

Pin package dependencies to the alpha versions with defer support

0dbdb34

Changelog updates

48115e3

Changelog updates

a0c57f6

chore: Publish

b4b205d

- apollo-boost@0.2.0-alpha.0 - apollo-cache-inmemory@1.2.6-alpha.0 - apollo-cache@1.1.13-alpha.0 - apollo-client@2.4.0-alpha.0 - apollo-utilities@1.0.17-alpha.0 - graphql-anywhere@4.1.15-alpha.0

clarencenpy added 5 commits August 7, 2018 19:02

Broadcasting changes from cache should update loadingState

6f633da

Merge branch 'master' into defer-support

f11e9a6

# Conflicts: # docs/source/features/defer-support.md # packages/apollo-client/package.json # packages/apollo-client/src/core/QueryManager.ts

Remove console.info for each patch

3cbfc09

Update CHANGELOG

41b4b8c

chore: Publish

dc53866

- apollo-boost@0.2.0-alpha.14 - apollo-cache-inmemory@1.2.6-alpha.14 - apollo-cache@1.1.13-alpha.14 - apollo-client@2.4.0-alpha.14 - apollo-utilities@1.0.17-alpha.14 - graphql-anywhere@4.1.15-alpha.14

apollographql deleted a comment from apollo-cla Aug 8, 2018

Update defer docs with how to do preloading

77e0c0c

apollographql deleted a comment from apollo-cla Aug 8, 2018

clarencenpy mentioned this pull request Aug 9, 2018

Generate types for loadingState exposed for deferred queries apollographql/apollo-tooling#539

Closed

Add type for loadingState

d904386

hwillson changed the title ~~Add client side support for @defer directive~~ [WIP] Add client side support for @defer directive Aug 12, 2018

rmosolgo mentioned this pull request Feb 27, 2019

Improve passing returnPartialData in @defer code #4504

Closed

rmosolgo mentioned this pull request Jun 6, 2019

Support for @defer rmosolgo/graphql-ruby#1710

Closed

hwillson closed this Sep 4, 2019

chrbradley mentioned this pull request Dec 10, 2019

Add support for @defer directive apollographql/apollo-server#1287

Closed

github-actions bot locked as resolved and limited conversation to collaborators Feb 1, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Add client side support for @defer directive #3686

[WIP] Add client side support for @defer directive #3686

clarencenpy commented Jul 13, 2018 •

edited

hwillson left a comment

hwillson Jul 19, 2018

hwillson Jul 19, 2018

hwillson Jul 19, 2018

hwillson Jul 19, 2018

hwillson Jul 19, 2018

hwillson Jul 19, 2018

hwillson Jul 19, 2018

hwillson Jul 19, 2018

hwillson Jul 19, 2018

clarencenpy Jul 20, 2018

apollo-cla commented Aug 9, 2018

rmosolgo commented Mar 5, 2019

Yalian commented Jul 30, 2019

sorenhoyer commented Sep 1, 2019

hwillson commented Sep 4, 2019

lukejagodzinski commented Nov 19, 2019

hwillson commented Nov 19, 2019

lukejagodzinski commented Nov 19, 2019

hwillson commented Nov 19, 2019

lukejagodzinski commented Nov 20, 2019

fabis94 commented Dec 10, 2020

KatFishSnake commented May 14, 2021

hwillson commented May 14, 2021

[WIP] Add client side support for @defer directive #3686

[WIP] Add client side support for @defer directive #3686

Conversation

clarencenpy commented Jul 13, 2018 • edited

hwillson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

apollo-cla commented Aug 9, 2018

rmosolgo commented Mar 5, 2019

Yalian commented Jul 30, 2019

sorenhoyer commented Sep 1, 2019

hwillson commented Sep 4, 2019

lukejagodzinski commented Nov 19, 2019

hwillson commented Nov 19, 2019

lukejagodzinski commented Nov 19, 2019

hwillson commented Nov 19, 2019

lukejagodzinski commented Nov 20, 2019

fabis94 commented Dec 10, 2020

KatFishSnake commented May 14, 2021

hwillson commented May 14, 2021

clarencenpy commented Jul 13, 2018 •

edited