useQuery cannot read properties of undefined (bind) for apollo client and apollo-server-express

Viewed 44

I am trying to use both apollo-serve-express and apollo's graphs to make queries, posts, gets, and mutations. I had to configure CORS to allow the apollo client to make CRUD requests to different port. Apollo can useMutations easily and use POST/GET requests, however, I lost functionality of useQuery despite it being the same code.

Am I even allowed to use Express CRUD with Apollo graphing? or have I been wasting time with one over the other when I should be using only 1?

What is expected to happen:

I am allowed to send queries, mutations, posts, gets, put, and delete to an Express/Apollo server from Apollo client.

What is actually happening:

Apollo-client will only send Express CRUD and mutations to the server. No Queries/useQuery is possible without receiving error.

What I tried:

  • Deleting packages and reinstalling
  • Update all packages
  • wrapping error in JSON.stringify to get detailed answer
  • copy all work from outdated working project

server.js:

const express = require("express");
const path = require("path");
const { ApolloServer } = require("apollo-server-express");
const PORT = process.env.PORT || 3001;
const app = express();
const db = require("./config/connection");
const { typeDefs, resolvers } = require("./schemas");
const { print } = require("@AlecRuin/color-logger");
const routes = require("./controllers");
const cors = require("cors");
const corsOptions = {
    origin:["http://localhost:3000","https://studio.apollographql.com"]
}
let apolloServer = null;
app.use(cors(corsOptions))
async function startServer() {
    apolloServer = new ApolloServer({
        typeDefs,
        resolvers,
        csrfPrevention:true,
        cache:'bounded'
    });
    await apolloServer.start();
    apolloServer.applyMiddleware({ app, cors:corsOptions });
    console.log(` Server ready at http://localhost:${PORT}${apolloServer.graphqlPath}`);
}
startServer();
app.use(express.json({ limit: "100mb" }));
// app.use(lightThrottle)
app.use(express.urlencoded());
//enhances security for API
// app.use(helmet());
//enabled CORS on all requests. (Cross-origin resource sharing)
// app.use(cors());
//allows logging HTTP requests
// app.use(morgan("combined"));
if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, '../client/build')));
}
app.use(routes);
db.once("open", () => {
    app.listen(PORT, () => {
        print(`Now listening on localhost:${PORT}`, new Error(), {isClient: false, });
    });
});

App.js:

import {ApolloProvider, InMemoryCache } from "@apollo/client";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ApolloClient from "apollo-boost";
import Homepage from "./pages/Homepage";
import LoginPage from "./pages/LandingPage";
import Auth from "./utils/auth";
import Verify from "./pages/VerifyUserPage";
const client = new ApolloClient({
  uri:"http://localhost:3001/graphql",
  cache:new InMemoryCache()
})
function App() {
  ...
  return (
    <ApolloProvider client={client}>
      <Router>
        <div>
          HELLO!!!!
        </div>
        {/* Routes */}
      <Routes>
        <Route path="/" element={<.../>}/>
        <Route path="*" element={<Homepage/>}/>
      </Routes>
      </Router>
    </ApolloProvider>
  );
}

export default App;

verifyUserPage/culprit spawning the error:

import React from "react";
import { sendVerifyLink } from "../utils/API/postRequests";
import Auth from "../utils/auth";
import { useQuery } from "@apollo/client";
import { GET_USER_BY_ID } from "../utils/queries";

const VerifyUser = ()=>{
    const id = Auth.getProfile().data._id
    const verifyQuery = useQuery(GET_USER_BY_ID,{
        variables:{id:id}
    })
//code below doesnt run because of useQuery error.
    if (verifyQuery.loading) return "Loading..."
    if (verifyQuery.error) return `ERROR: ${JSON.stringify(verifyQuery.error)}`

    ...standard react code...
}
export default VerifyUser

I wont show the actual resolvers or typeDefs because they function perfectly in studio.apollo

finally, the error I get:

Cannot read properties of undefined (reading 'bind')

0 Answers
Related