Comments (13)
Hey @fredericbirke š Thanks for the offer, but I just noticed that Apollo Angular has its own HttpLink
which does not yet have @defer
support, so I'm guessing that explains the error you're seeing :) I'd love to help fix that.
from apollo-angular.
Created a feature request here: angular/angular#52494
from apollo-angular.
Hey @alessbell,
Sorry for the late reply, I was on vacation the last few weeks.
I will create a reproduction repo and share a replay the next few days :)
from apollo-angular.
Hey @alessbell,
Sorry for the absence. That sounds awesome! Do you still need my reproduction repo or can I help you somehow to add the defer support?
from apollo-angular.
I won't work on this myself, but if you guys come up with a PR I'll gladly merge it.
from apollo-angular.
I'm on vacation this week but I don't need your reproduction, @fredericbirke, but thanks for the offer :) I can pick this up when I'm back online next week.
from apollo-angular.
Hi @fredericbirke š I work on Apollo Client and just came across this issue - would you be able to share a Replay recording of this issue? (Note: you don't have to grant Replay access to a private repo to create a recording, but it will contain source maps for your JavaScript code and record all network requests). You can share it directly with me at [email protected].
I'd love to look into this and see what may be happening. Thanks :)
from apollo-angular.
Hey everyone š I have some updates to share from looking into this todayā¦
First, I didnāt know when or why Apollo Angularās HttpLink
diverged from Apollo Client's, so I started there. I saw it supports file uploads, which the original HttpLink
doesnāt, but the larger reason this implementation was created, imo, is that Angular still uses XHR instead of fetch.
Indeed, in Apollo Angularās http/src/utils.ts
āfetch
ā š function (used by its HttpLink
), the network request is made via httpClient.request
. That httpClient
is Angularās HttpClientModule
.
The bad news
XHR doesnāt support text streaming which is needed to power the multipart response format used to deliver the chunks. This is also an issue for React Native which uses XHR and requires a whole host of polyfills in order to get a feature like @defer
working.
The good news
That said, as far as I can tell thereās nothing preventing us from using Apollo Clientās HttpLink
, and by extension fetch
. I created a demo doing exactly this, and it works nicely with @defer
(or multipart subscriptions, for that matter): https://github.com/alessbell/simple-apollo-angular
If you're interested in trying it out yourself, the important bits are in src/app/graphql.module.ts
where the provider deps contain our InjectableHttpLink
which creates an Apollo Client HttpLink
instead of using the HttpLink
exported by Apollo Angular.
All that said, Iām not an Angular dev and would love to hear from folks who try this out. There may be other implications of not using Angularās HttpClientModule
Iām not aware of. The two I'm thinking of are retries and errors: maybe you canāt use RxJSās retry
the same way, but I havenāt tried this out with both HttpLink
s for comparison so I'm not sure. And Iām not familiar with the error handling conventions in Angular: using Apollo Clientās HttpLink
, I was able to receive errors by passing e.g. catchError(this.handleError)
as the final argument to pipe
, which receives the ApolloError
, but I donāt know enough Angular to update the UI :)
Again, Iād love to hear from folks who try this out! Iām hoping itās a feasible alternative, and it seems promising so far. As for this issue, it can probably be closed out as first party support in Apollo Angularās HttpLink
is a non-starter until Angularās HTTP Client uses fetch.
from apollo-angular.
Thank you for investigating.
The bad news
Not using HttpClientModule
to support defer is unfortunately a non-starter for this lib. Because HttpClientModule
offers a tight integration into Angular ecosystem. Especially HttpInterceptor which allows to intercept any XHR globally in the entire application, be it a GraphQL XHR or something else. This is typically useful to show some kind of "network activity" indicator to end-users, but it's also useful to handle errors globally.
The good news
fetch
support has been introduced in Angular 16.1 via angular/angular#50247, and was made stable very recently. So it will land in Angular 17.0.
If we can leverage this new FetchBackend
to support defer
, then we could support defer
in this lib. And either requires to use FetchBackend
, or detect the backend and support defer
only if FetchBackend
is used.
from apollo-angular.
Not using
HttpClientModule
to support defer is unfortunately a non-starter for this lib.
I didn't suggest removing HttpClientModule
:) My point was that if anyone wants to do this today because they don't need what HttpClientModule
provides, they can.
fetch support has been introduced in Angular 16.1 via angular/angular#50247, and was angular/angular#52197. So it will land in Angular 17.0.
Indeed, by setting the providers with provideHttpClient(withFetch()),
HttpClientModule
uses fetch with Angular >= 16.1. But unfortunately there's a blocker: Angular doesn't expose the ReadableStream
which is necessary for reading individual chunks as they arrive. Instead, it assembles all chunks into a single result which the observable returns: https://github.com/angular/angular/blob/f615f4f90d3a053de2f273f6bd6d3e00ebfbb790/packages/common/http/src/fetch.ts#L115-L143
@defer
, or any feature using the multipart/mixed
response format, will not be possible with HttpClientModule
until it exposes this functionality.
from apollo-angular.
Hi @PowerKiKi š Unfortunately I haven't had much luck with my feature request.
We've gotten a fair number of support requests from users trying to use @defer
with apollo-angular, and I fear this issue isn't the first place blocked users will look. Would you consider adding some language to the docs that describes the current @defer
limitations and available workarounds? I'd be happy to draft the PR, thanks!
from apollo-angular.
You might have a better position to update the docs as you see fit, since I am not super familiar with @defer
. Please create a PR when you have time.
from apollo-angular.
I found this issue when I was trying to implement support for batching requests to a Hot Chocolate backend. The error seen in the browser is the same. However, the Apollo Client currently does not support this either; see apollographql/apollo-feature-requests#387
from apollo-angular.
Related Issues (20)
- Feedback for āPaginationā
- TypeError: Cannot read properties of undefined (reading 'architect') HOT 1
- Feedback for āServer Side Renderingā HOT 1
- Feedback Reset Store on Logout
- For subscriptions, the errorPolicy setting does nothing. HOT 6
- Block ApolloClient devtools checks to run when using ApolloTestingModule HOT 1
- [docs] Simple Apollo Angular Example demo is broken
- Support for Angular Signals ? HOT 7
- Angular 17 support HOT 3
- apollo-angular schematics has a fixed version of apollo-angular and @apollo/client packages HOT 1
- Unable to load template plugin matching 'apollo-angular'
- `ERR_UNSUPPORTED_DIR_IMPORT` or `EISDIR` with `vitest` HOT 1
- Pending timers using fakeAsync HOT 1
- Reset the store not possible anymore with version 7.0.0 HOT 1
- apollo-angular prevents Zone from becoming stable HOT 6
- Feedback for āGet Startedā > "Installation without Angular Schematics" HOT 1
- No support for angular 18 HOT 1
- Feedback for āError Handlingā
- Apollo-Angular providers break Angular Material. HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apollo-angular.