Not able to display Redis data from Apollo Client

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.