Not compatible with @apollo/client version 4.0.0

[JosephHalter]

Describe the bug

Can't upgrade to @apollo/client version 4.0.0

To Reproduce

Upgrade to @apollo/client version 4.0.0, all queries fail because they return the wrong result type, possibly other issues too but it's impossible to know since any fetch fails immediately.

Expected behavior

HttpLinkHandler should return either ApolloLink.Result or FormattedExecutionResult, returns the no longer supported ApolloQueryResult type instead.

[JosephHalter]

Seems like a pull request for this was created 5 months ago but never finished #2355 - is it a work in progress?

[PowerKiKi]

Yes it is a work in progress toward supporting apollo 4.0. It was paused until the final release of Apollo. I am not sure when I'll resume work. So if you're in a hurry, feel free to complete the PR, by creating a new PR against that PR.

[robertIsaac]

@PowerKiKi I see it's merged, what's the ETA of the release?

[PowerKiKi]

See #2367 (comment) and following discussion. If no negative feedback, it would probably in a few days.

[muuvmuuv]

Hey, sry, haven't had time to check the alpha/beta of v12. We checked with filter((r) => r.dataState === 'complete') before which kind of worked but not any longer. The new onlyComplete() throws an error:

Argument of type 'OperatorFunction<Result<TypedFilterTreeQuery | undefined, "complete" | "empty" | "streaming" | "partial">, Result<TypedFilterTreeQuery | undefined, "complete">>' is not assignable to parameter of type 'OperatorFunction<QueryResult<TypedFilterTreeQuery>, Result<TypedFilterTreeQuery | undefined, "complete">>'.
  Type 'QueryResult<TypedFilterTreeQuery>' is not assignable to type 'Result<TypedFilterTreeQuery | undefined, "complete" | "empty" | "streaming" | "partial">'.
    Type 'QueryResult<TypedFilterTreeQuery>' is not assignable to type '{ error?: ErrorLike | undefined; loading: boolean; networkStatus: NetworkStatus; partial: boolean; } & { data: DeepPartialObject<TypedFilterTreeQuery> | undefined; dataState: "partial"; }'.
      Type 'QueryResult<TypedFilterTreeQuery>' is missing the following properties from type '{ error?: ErrorLike | undefined; loading: boolean; networkStatus: NetworkStatus; partial: boolean; }': loading, networkStatus, partialts(2345)

I did update @apollo/client to ^4.0.1 which resolved to ^4.0.7. But pinning to 4.0.1 didn't solved the issue (sometimes type independences fix this).

Doing some undefined pre-check also no longer works unfortunately:

[PowerKiKi]

@muuvmuuv, below is a standalone reproduction case that proves that onlyComplete() actually works. Because it can be affected to the manually specified type of Observable<Film>.

• apollo-angular@12.0.0
• @apollo/client@4.0.7
• typescript@5.9.2
• @angular/core@20.2.4

If you still have problems, open a new issue that includes a minimal reproduction case.

import {Component, inject} from '@angular/core';
import {Apollo, gql, onlyComplete, provideApollo} from 'apollo-angular';
import {map, Observable} from 'rxjs';
import {AsyncPipe, JsonPipe} from '@angular/common';
import {HttpLink} from 'apollo-angular/http';
import {InMemoryCache} from '@apollo/client';

type  FilmQuery = {
  allFilms: { films: Film[] };
}

type Variables = Record<PropertyKey, never>;

type Film = {
  id: number;
  title: string;
  director: string;
  releaseDate: string;
}

@Component({
  selector: 'app-root',
  imports: [
    JsonPipe,
    AsyncPipe
  ],
  providers: [
    provideApollo(() => {
      const httpLink = inject(HttpLink);

      return {
        link: httpLink.create({
          uri: 'https://swapi-graphql.netlify.app/graphql',
        }),
        cache: new InMemoryCache(),
      };
    })],
  template: `
    <h1>it works</h1>

    <h2>completeData</h2>
    <pre>{{ firstFilm | async | json }}</pre>

    <h2>raw query</h2>
    <pre>{{ query | async | json }}</pre>
  `,
  styleUrl: './app.css'
})
export class App {
  private readonly apollo = inject(Apollo);

  protected readonly query = this.apollo
    .watchQuery({
      query: gql<FilmQuery, Variables>`
        query AllFilms {
          allFilms {
            films {
              id
              title
              director
              releaseDate
            }
          }
        }
      `,
    }).valueChanges;

  protected readonly firstFilm: Observable<Film> = this.query.pipe(onlyComplete(), map(result => result.data.allFilms.films[0]));
}