Nextjs and ApolloClient networkError / ApolloError with WSL2

System Information
  • 4.4.5:
  • Windows 10 - WSL2(Ubuntu 22.10):
  • SQLLite:
  • node v18.2.0:
  • 8.9.0:
  • 1.22.4:

Hey!

I have created a development environment locally on my system running Windows with WSL2. This works as far as possible, but as soon as I call the GraphQL call with ApolloClient in the function “getStaticProps()” I get an error message.

Code:

index.js (entrypoint):

export async function getStaticProps() {
  const client = new ApolloClient({
    uri: `http://localhost:3005/graphql`,
    cache: new InMemoryCache(),
  });

  console.log(client);

  const { data } = await client.query({
    query: gql`
      query GET_ALL_POSTS {
        blogPosts {
          data {
            attributes {
              title
              description
              urlSlug
            }
          }
        }
      }
    `,
  });

  return {
    props: {
      posts: data.blogPosts.data,
    },
  };
}

Errors:

error - ApolloError: Cannot read properties of undefined (reading 'name')
    at new ApolloError (/home/projekte/my-own-blog/tests/next-strapi-graphql/my-blog/node_modules/@apollo/client/errors/errors.cjs:34:28)
....
    at SubscriptionObserver.error (/home/projekte/my-own-blog/tests/next-strapi-graphql/my-blog/node_modules/zen-observable/lib/Observable.js:240:7) {
  graphQLErrors: [],
  clientErrors: [],
  networkError: TypeError: Cannot read properties of undefined (reading 'name')
      at new Request (node:internal/deps/undici/undici:4977:35)
      at Agent.fetch2 (node:internal/deps/undici/undici:5539:29)
...

I have now tried the following to debug:

  1. I installed the project on my MacBook and it works without any problems.

  2. If I use “useQuery” from ApolloClient to render the data directly on retrieval, it works, but I don’t want to do the App as SSR.

I suspect that the problem is related to WSL, but I don’t know how to solve it. Does anyone have any idea?

Update:

I try it on a second machine with Ubuntu and it works fine but on a second Windows machine it doesent works.I am sure that problem is a problem between WSL and NextJS. Work someone with WSL and have the same problem?

I think i leave Windows behind me. To mutch problems with Windows Subsystem. Im sad.

I don’t have a solution for you but I’m having the exact same issue, but with Windows 11. If it helps temporarily unblock you, the band-aid solution I found was to downgrade @apollo/client to anything below 3.7.0 (currently using v3.6.10 and works fine). Unfortunately I haven’t seen any real solutions, everyone just downgrades their @apollo/client or graphql packages.

this has to do with the node version you are using. If you have nvm installed, make sure that your node version is compatible with the dependencies of your project. so instead of downgrading your Apollo client, upgrade your node version to be compatible with it.