Currently, I am expanding my knowledge on GraphQL and Next.js by taking a course on Udemy. The course instructor utilizes ApolloClient from the apollo-boost package, but I have opted to use the newer @apollo/client package instead.
In the original method using apollo-boost's ApolloClient, the author sets credentials for each request as shown below:
new ApolloClient({
request: operation => {
operation.setContext({
fetchOptions: {
credentials: 'include'
},
headers
})
},
uri: process.env.BASE_URL,
cache: new InMemoryCache().restore(initialState || {})
})
The above approach did not work for me, as the request property is not present in the @apollo/client's ApolloClient. My alternative solution was as follows:
const link = new HttpLink({ uri: "http://localhost:3000/graphql", credentials: 'include' });
new ApolloClient({
cache: new InMemoryCache().restore(initialState || { }),
link,
})
However, the credentials were not being applied to each request, leading to a lack of user information retrieval. In my setup, I utilize passport which stores logged-in user information in cookies. Below is an excerpt from my index.js file showcasing how passport is configured:
const config = require('../config/dev');
const sessison = require('express-session');
const passport = require('passport');
exports.init = (server, db) => {
require('./passport').init(passport);
const sess = {
name: 'portfolio-session',
secret: config.SESSION_SECRET,
cookie: { maxAge: 2 * 60 * 60 * 100},
resave: false,
saveUninitialized: false,
store: db.initSessionStore()
}
server.use(sessison(sess));
server.use(passport.initialize());
server.use(passport.session());
}
If anyone has insights or suggestions on how to add authentication to ApolloClient, your assistance would be greatly appreciated.
Thank you :)