Not able to display Redis data from Apollo Client - node.js

Question

I am trying to add a post in Graphql and storing it in Redis, below is the code:
Client
NewPost.js:
import { useMutation, useQuery } from "#apollo/client";
import { UPLOAD_IMAGE } from "./mutation";
import { useState } from "react";
function NewPost() {
const [posterName, setPosterName] = useState(null);
const [uploadImage] = useMutation(UPLOAD_IMAGE);
const [url, setUrl] = useState(null);
const [description, setDescription] = useState(null);
const addPost = () => {
uploadImage({
variables: {
url: url,
description: description,
posterName: posterName,
},
});
};
return (
<div className="App">
Url--- <input onChange={(e) => setUrl(e.target.value)} />
<br />
PosterName--- <input onChange={(e) => setPosterName(e.target.value)} />
<br />
Description ---
<input onChange={(e) => setDescription(e.target.value)} />
<br />
<button onClick={() => addPost()}>Add Post</button>
</div>
);
}
export default NewPost;
mutation.js:
import { gql } from "#apollo/client";
export const UPLOAD_IMAGE = gql`
mutation uploadImage($url: String, $description: String, $posterName: String) {
uploadImage(post: { url: $url, description: $description , posterName: $posterName }) {
url
posterName
description
}
}
`;
App.js:
import React from 'react';
import {NavLink, BrowserRouter as Router, Route} from 'react-router-dom';
import UserPosts from './components/UserPosts';
import Bin from './components/Bin';
import Home from './components/Home';
import NewPost from './components/NewPost';
import UnsplashPosts from './components/UnsplashPosts';
import {
ApolloClient,
HttpLink,
InMemoryCache,
ApolloProvider
} from '#apollo/client';
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: 'http://localhost:4000'
})
});
function App() {
return (
<ApolloProvider client={client}>
<Router>
<div>
<header className='App-header'>
<h1 className='App-title'>
GraphQL Lab5
</h1>
<nav>
<NavLink className='navlink' to='/'>
Home
</NavLink>
<NavLink className='navlink' to='/my-bin'>
Bin
</NavLink>
<NavLink className='navlink' to='/my-posts'>
Posts
</NavLink>
<NavLink className='navlink' to='/new-post'>
Create New Post
</NavLink>
</nav>
</header>
<Route exact path='/' component={UnsplashPosts} />
<Route path='/my-bin/' component={Bin} />
<Route path='/my-posts' component={UserPosts} />
<Route path='/new-post' component={NewPost} />
</div>
</Router>
</ApolloProvider>
);
}
export default App;
Server
index.js:
const {ApolloServer, gql} = require('apollo-server');
const axios = require('axios');
const uuid = require('uuid');
const bluebird = require('bluebird');
const redis = require('redis')
const client = redis.createClient();
bluebird.promisifyAll(redis.RedisClient.prototype);
bluebird.promisifyAll(redis.Multi.prototype);
const typeDefs = gql`
type Query {
photos: [Photo]
post: [ImagePost]
unsplashImages: [ImagePost]
userPostedImages: [ImagePost]
}
type Photo {
id: String
username: String
}
type ImagePost {
id: String
url: String!
posterName: String!
description: String
userPosted: Boolean
binned: Boolean
}
type Mutation {
uploadImage(
url: String
description: String
posterName: String
): ImagePost
}
`;
const resolvers = {
Query: {
unsplashImages: async (_, args) => {
const { data } = await axios.get('https://api.unsplash.com/photos/?client_id=2zceQd7D4SraKoqW_GjPzXboSup3TKRIPk7EXfJBcAs');
const a = data.map(imagePost => {
return {
id: imagePost.id,
posterName: imagePost.user.name,
url: imagePost.urls.raw,
description: imagePost.description,
}
})
return a;
},
userPostedImages: async (_,args) => {
let history = await client.lrangeAsync("postedImagesList",0,100).map(JSON.parse);
return history;
}
},
Mutation: {
uploadImage: async (_,args) => {
//const { data } = await axios.get('https://api.unsplash.com/photos/?client_id=2zceQd7D4SraKoqW_GjPzXboSup3TKRIPk7EXfJBcAs');
const newPost = {
id: uuid.v4(),
url: args.url,
description: args.description,
posterName: args.posterName,
binned: false,
userPosted: true,
}
await client.lpushAsync("postedImagesList",JSON.stringify(newPost));
}
}
};
const server = new ApolloServer({typeDefs, resolvers});
server.listen().then(({url}) => {
console.log(`🚀 Server ready at ${url} 🚀`);
});
When I try to add a post only using the server I am able to do so in the playground, but when I click on Add post in frontend, the post does not get added to redis and does not show up.