Next.js 13 + Apollo Client 3.7.1 = Error

[rajat1saxena]

Intended outcome:
Apollo client should fetch the data correctly

Actual outcome:
I am getting the following error

error - ApolloError: Cannot read properties of undefined (reading 'name')
    at new ApolloError (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/errors/errors.cjs:34:28)
    at /Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/core/core.cjs:1698:19
    at both (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/utilities/utilities.cjs:997:53)
    at /Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/utilities/utilities.cjs:990:72
    at new Promise (<anonymous>)
    at Object.then (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/utilities/utilities.cjs:990:24)
    at Object.error (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/utilities/utilities.cjs:998:49)
    at notifySubscription (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/zen-observable/lib/Observable.js:140:18)
    at onNotify (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/zen-observable/lib/Observable.js:179:3)
    at SubscriptionObserver.error (/Users/rajat/dev/throw-away/city-app/frontend/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)
      at Object.fetch (node:internal/deps/undici/undici:6370:20)
      at fetch (node:internal/bootstrap/pre_execution:196:25)
      at /Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/link/http/http.cjs:567:13
      at new Subscription (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/zen-observable/lib/Observable.js:197:34)
      at Observable.subscribe (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/zen-observable/lib/Observable.js:279:14)
      at Object.complete (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/utilities/utilities.cjs:1109:43)
      at Concast.start (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/utilities/utilities.cjs:1136:23)
      at new Concast (/Users/rajat/dev/throw-away/city-app/frontend/node_modules/@apollo/client/utilities/utilities.cjs:1128:19),
  extraInfo: undefined,
  page: '/'
}

How to reproduce the issue:
I created a new Next.js app and installed @apollo/client and graphql packages. Then I created a file apollo-client.ts taken from here.

In my pages/index.tsx files, I have written the following block and it is throwing the above error.

const { data } = await client.query({
        query: gql`
        query Cities {
            cities {
              data {
                attributes {
                  name,
                  displayname
                }
              }
            }
        }
        ` 
    });
    console.log(data);

Versions

  System:
    OS: macOS 13.0
  Binaries:
    Node: 18.2.0 - ~/.nvm/versions/node/v18.2.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.2.0/bin/yarn
    npm: 8.9.0 - ~/.nvm/versions/node/v18.2.0/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Safari: 16.1
  npmPackages:
    @apollo/client: ^3.7.1 => 3.7.1 

[jerelmiller]

Hey @rajat1saxena, I see your query includes a comma after name:

query Cities {
  cities {
    data {
      attributes {
        name, # <----
        displayname
      }
    }
  }
}

Just to rule it out as the issue, could you remove that comma and see if you're still getting that error?

[isolonenko]

Had the same issue on mac os with M1 pro CPU. The issue was resolved by customizing fetch on ssr instead of default.
Probably node bug on arm structure.

const httpLink = createHttpLink({
    uri: GRAPHQL_ENDPOINT_URL,
    credentials: 'same-origin',
    fetch: crossFetch,
  });

"@apollo/client": "^3.7.1",
"next": "^12.3.0",
"node": "18.2.0",
"macOS": "13.0"

"cross-fetch": "^3.1.5",  //Resolved the issue. Tried node-fetch, but signatures aren't compatible

docs: https://www.apollographql.com/docs/react/api/link/apollo-link-http/#customizing-fetch

[partounian]

@isolonenko interesting that works for you. When I try to use 'cross-fetch', I get the error Uncaught Error: Module not found: Can't resolve 'cross-fetch' (having weird issues with next.js 13 + apollo client 3.7.x on M1 Pro also)

Thanks! That also fixed my issue. My can't resolve error was to bad docker-compose mounting

[vindard]

I got this as well. What fixed it for me was upgrading from node v18.3.0 to v18.12.1

[bignimbus]

Hi all, just checking in here - do we think this is actionable for the client maintainers or can we close this as resolved?

[partounian]

Just my 2c but I think it's fine to close.

[alessbell]

Thanks @partounian - in that case I'm going to close this issue out, but feel free to open a new issue as needed. Thanks all!

[RodrigoBeInCrypto]

Hello i am having the same problem
import Image from 'next/image'
import { Inter } from '@next/font/google'
import styles from '@/styles/Home.module.css'
import { ApolloClient, InMemoryCache, gql,} from '@apollo/client'
import GET_GRAPHQL from '../../graphql/graphql'

const inter = Inter({ subsets: ['latin'] })

export default function Home({messages}) {
console.log(messages)
return (

<>

  
 <h1>holas</h1>

</>

)
}
export async function getStaticProps() {

const client = new ApolloClient ({
uri : process.env.STRAPI_GRAPHQL_API,
cache : new InMemoryCache(),

});
const {data} = await client.query({query:GET_GRAPHQL})

return {
props: {
messages: 'data.messages'
}
}
}

[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.