Trying to setup graphql in React Native project but getting an error on query call

Was hoping to better understand where I might be going wrong or if there was an approach where we may not need apollo in order to query the backend. When I test my queries in http://localhost:3000/api/v1/graphql everything is working. On the frontend from what I've seen I would need to set up an apollo client as

import { HttpLink } from 'apollo-link-http';
import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
const makeApolloClient = () => {
    // create an apollo link instance, a network interface for apollo client
    const link = new HttpLink({
        uri: `http://10.0.0.151:3000/api/v1/graphql`
    });
    // create an inmemory cache instance for caching graphql data
    const cache = new InMemoryCache();
    // instantiate apollo client with apollo link instance and cache instance
    const client = new ApolloClient({
        link,
        cache
    });
    return client;
};
export default makeApolloClient;

and finally import the client and wrap it around my App. It is being done as

import makeApolloClient from './apollo';

const initialState = {};
const store = configureStore(initialState);
const client = makeApolloClient();

const App = () => {
    return (
        <ApolloProvider client={client}>
            <Provider store={store}>
                <NavigationContainer>
                    <Root />
                </NavigationContainer>
            </Provider>
        </ApolloProvider>
    );
};

but this current approach is causing an error. The error says Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance via options

Was hoping to know what I might be doing wrong. I am trying to make a query call as

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

const query = gql`
    {
        getAllUsers {
            email
        }
    }
`;

const SigninScreen = ({ navigation, saveToken }) => {
    const token = useSelector((state) => state.session.token);
    const dispatch = useDispatch();

    const { data, error, loading } = useQuery(query);
    console.log('THE DSATA IS', data);
    console.log('THE ERROR IS ', error);
    console.log('THE LOADING IS ', loading);