the-guild-org / the-guild-org/apollo-angular

How to test with custom ApolloClientOptions?

Open
#1,880 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
309
Avg merge
1h 45m
Merged PRs (30d)
3

Description

I'm trying to write a test using the ApolloTestingModule and ApolloClientOptions.

I provide custom ApolloClientOptions with the APOLLO_OPTION injection token. In the options I set the "no-cache" fetch-policy for my queries.

In my Test I import the ApolloTestingModule. When I run my test, I get the following error: "Error: Apollo has been already created." I'm not sure which part already created the default client but the ApolloTestingModule also tries to create the default client with the fake backend and a cache (that might be provided).

I made a local copy of the ApolloTestingModuleCore and modified the code a bit:

export class ApolloTestingModuleCore {
  constructor(
    apollo: Apollo,
    backend: ApolloTestingBackend,
    @Optional()
    @Inject(APOLLO_TESTING_CLIENTS)
    namedClients?: string[],
    @Optional()
    @Inject(APOLLO_TESTING_CACHE)
    cache?: ApolloCache<any>,
    @Optional()
    @Inject(APOLLO_TESTING_NAMED_CACHE)
    namedCaches?: any, // FIX: using NamedCaches here makes ngc fail
    @Optional()
    @Inject(APOLLO_OPTIONS)
      options?: ApolloClientOptions<any>,
  ) {
    function createOptions(name: string, c?: ApolloCache<any> | null) {
      return {
        ...options,
        link: new ApolloLink((operation) =>
          backend.handle(addClient(name, operation)),
        ),
        cache:
          c ||
          new InMemoryCache({
            addTypename: false,
          }),
      };
    }
     
    apollo.removeClient('default');
    apollo.create(createOptions('default', cache));

    if (namedClients && namedClients.length) {
      namedClients.forEach((name) => {
        const caches =
          namedCaches && typeof namedCaches === 'object' ? namedCaches : {};

        apollo.createNamed(name, createOptions(name, caches[name]));
      });
    }
  }
}

When I use the modified version of the ApolloTestingModuleCore everything works as expected.

Is it possible to change this part or is there an intended way to test with ApolloClientOptions?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The relevant entry point is packages/apollo-angular/testing/src/module.ts, specifically ApolloTestingModuleCore; start by tracing how APOLLO_OPTIONS is injected while ApolloTestingModule creates its default client. Reproduce the custom no-cache test described in the issue and verify that the options are honored without the “Apollo has been already created” error.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, graphql, typescript
Domain
frontend, testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.