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.