TypeError: graphql.parse is not a function (it is undefined), js engine: hermes

[oreoluwadnd]

I'm encountering an issue while setting up Apollo GraphQL with my React Native app.

Here's some context about my setup:

I'm using React Native for my mobile app development.

I'm trying to make simple query to fetch user data.

I've verified that I have installed all the necessary packages and dependencies, including graphql. Here's what I've tried so far:

Checked my package.json to ensure that graphql is listed as a dependency.
Verified that I'm importing graphql correctly in my code.

Despite these efforts, I'm still encountering this error. Could someone please provide guidance on how to resolve this issue? Any insights or suggestions would be greatly appreciated.

Tasks

Preview Give feedback

No tasks being tracked yet.

[jerelmiller]

Hey @oreoluwadnd 👋

Can you share more about what you're doing? Its difficult to tell whats happening without seeing how you're using gql. Any more information you can give would be super helpful. Thanks!

[oreoluwadnd]

Hi @jerelmiller.

In my React Native app, I have set up Apollo Client to handle GraphQL queries and mutations. Here's a bit more detail about my implementation.

Setup: I've installed the necessary packages using yarn, including @apollo/client version 3.3.19 for Apollo Client and graphql version 16.8.1 for working with GraphQL queries.
Apollo Client Configuration: I've configured Apollo Client in my app's entry point. Here's a simplified version of my configuration:

import React from "react";
import {
  ApolloClient,
  ApolloProvider,
  from,
  HttpLink,
  InMemoryCache,
} from "@apollo/client";
import { onError } from "@apollo/client/link/error";
import { PropsWithChildren, useState } from "react";

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach((error, index) => {
      console.log(`GraphQL error ${index}:`, error);
    });
  }
  if (networkError) {
    console.log("Network errors:", networkError);
  }
});

const httpLink = new HttpLink({
  uri: "http://localhost:4000/graphql" ,
});

const Providers = ({ children }: PropsWithChildren) => {
  const [client] = useState(
    () =>
      new ApolloClient({
        link: from([errorLink, httpLink]),
        cache: new InMemoryCache(),
      })
  );

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

export default Providers;

Using gql: In my components or other parts of the app, I import gql from @apollo/client to define GraphQL queries and mutations. Here's an example of how I'm using gql:

import { gql, useQuery } from '@apollo/client';

const GET_USERS = gql`
  query {
    users {
      id
      name
      email
    }
  }
`;

const { loading, error, data } = useQuery(GET_USERS);

This is where I encounter the error with graphql.parse. It seems to be related to how gql is used, but I'm not sure what might be causing it.

If there's any specific part of my implementation, you'd like more details on, or if you have any other questions, please let me know. I appreciate your help!

[jerelmiller]

Hmmm interesting. Nothing you posted here sticks out to me as problematic. We definitely have users of React Native that are using Apollo Client, so its possible there is something happening with your build environment?

I'd be curious if simply upgrading Apollo Client fixes your issue. We just released 3.10.1. It looks like 3.3.19 was released in May 2021, so its almost 3 years old. There have been a ton of fixes and build optimizations since the version you're working with, especially on the React Native side, so there is a chance this might help on its own.

If that doesn't work, you might try the troubleshooting steps from this section of our docs. The error described in that section doesn't look quite the same as what you're seeing, but perhaps there is a relation of some kind? Could you perhaps try that?

If neither of these work, any chance you could provide a minimal reproduction of the issue? We'd be happy to dig in a bit further, but unfortunately the information above isn't enough for us to go on 🙁

[alessbell]

One other question, @oreoluwadnd: what bundler are you using? If it's Metro, we have a note in our React Native troubleshooting section that may be of use to you about implicitly resolving .cjs/.mjs files: https://www.apollographql.com/docs/react/integrations/react-native/#troubleshooting

[alessbell]

@oreoluwadnd did importing from e.g. @apollo/client/main.cjs - and configuring your bundler to resolve .cjs files if necessary - solve your issue? If not, we'd be happy to take a look at a reproduction.