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')