3.9.7 switching fetch in HttpLink to Axios triples speed

[billnbell2]

Issue Description

I switched fetch in HttpLink to Axios and the speed went from 5-7 seconds to 1 second! NEXT JS

WHY
?

Link to Reproduction

NO

Reproduction Steps

NOPE

@apollo/client version

3.9.7

[phryneas]

It's hard to tell anything here without seeing what exactly you did - please show us some code :)

Also, how did you measure this speed increase? Is this in RSC, SSR or in the Browser? How big is your response?

I think we'll generally need a bit more context here :)

[github-actions]

We're closing this issue now but feel free to ping the maintainers or open a new issue if you still need support. Thank you!

[billnbell2]

Here is some code.

It is pretty self explanatory though. Switch Apollo-CLient to use cross-fetch.

Here -

import fetch from 'cross-fetch';

export const client = (
  showError: (str?: string) => void = (_str?: string) => {}
) =>
  new ApolloClient({
    defaultOptions,
    link: from([
      authLink,
      retryLink,
      errorLink(showError),
        createHttpLink({
            uri: process.env.NEXT_PUBLIC_GRAPHQL_URL,
            fetch,
          }),
    ]),
    cache,
  });

[jerelmiller]

@billnbell2 appreciate the code, but I'm not sure what you're looking for from us?

[billnbell2]

Why do I need to use cross-fetch ?

If I leave it the default it takes Apollo Client 1-2 seconds per calls, when I use cross-fetch we are consistently at 200ms. Same exact call.

[billnbell2]

Can you try it yourself and see if you get similar perf gains?

[jerelmiller]

You are absolutely free to use whatever fetch implementation works for you. We're just using the built-in global fetch function available in your environment.

The only thing I can think might be happening here is that perhaps something is patching fetch in your environment and causing the perf issues on your end. Your code sample implies you're using Next.js which does fetch patching to add cache behavior to it. In fact, this was something that was recently reverted in React itself. Perhaps you're running into something here?

To be honest, even if this weren't it, we wouldn't make any current changes as using the global fetch function means we don't need additional dependencies which adds bundle size. Again, feel free to use cross-fetch if you'd like instead. I'd start however by taking a look at your global fetch function to see if there is something patching it first. You might be able to avoid the cross-fetch dependency yourself if need be. You can find out more about how Next.js patches it in their docs.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.