how to use createUploadLink and GraphQLWsLink in react - node.js

Question

i'm trying to use createUploadLink and GraphQLWsLink in react is there any way
import * as dotenv from 'dotenv'
dotenv.config()
import { getUser, userProtect ,adminProtect,getAdmin} from "./Users/user.utilities.js";
import { typeDefs, resolvers } from './schema.js';
import { ApolloServer } from '#apollo/server';
import { createServer } from 'http';
import { expressMiddleware } from '#apollo/server/express4';
import { ApolloServerPluginDrainHttpServer } from '#apollo/server/plugin/drainHttpServer';
import { makeExecutableSchema } from '#graphql-tools/schema';
import bodyParser from 'body-parser';
import express from 'express';
import { graphqlUploadExpress,GraphQLUpload} from "graphql-upload";
import * as path from 'path';
import { WebSocketServer } from 'ws';
import { useServer } from 'graphql-ws/lib/use/ws';
import { PubSub } from 'graphql-subscriptions';
const schema = makeExecutableSchema({ typeDefs, resolvers });
const app = express();
const httpServer = createServer(app);
const wsServer = new WebSocketServer({
server: httpServer,
path: '/graphql'
});
const wsServerCleanup = useServer({schema}, wsServer);
const startApolloServer = async () => {
app.use(graphqlUploadExpress())
app.use('/images', express.static(path.join(__dirname, '/uploads/images')))
const context = async ({ req }) => {
return {
LogedInUser: await getUser(req.headers.token),
LogedInAdmin: await getAdmin(req.headers.admintoken),
userProtect,
adminProtect
}
}
const server = new ApolloServer({
schema,
plugins: [
ApolloServerPluginDrainHttpServer({ httpServer }),
{
async serverWillStart() {
return {
async drainServer() {
await wsServerCleanup.dispose();
}
}
}
}
],
})
await server.start();
app.use('/graphql', bodyParser.json(), expressMiddleware(server,{ context }));
}
startApolloServer()
httpServer.listen(8000, () => { console.log(`🚀 Server ready at http://localhost:4000$`) })
;
i've tried this but is not working
const wsLink = new GraphQLWsLink(createClient({
url: 'ws://localhost:8000/graphql',
}));
const uploadLink = createUploadLink({
uri: "http://localhost:8000/graphql" });
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink,
);
const authLink = setContext((_,{headers })=>{
return{
headers:{
...headers,
token:localStorage.getItem(TOKEN),
admintoken:localStorage.getItem(ADMINTOKE)
}
}
})
export const client = new ApolloClient({
link:authLink.concat(splitLink) ,
cache: new InMemoryCache(),
});
i'm trying to use createUploadLink and GraphQLWsLink in react is there any way
i'm trying to use createUploadLink and GraphQLWsLink in react is there any wayi'm trying to use createUploadLink and GraphQLWsLink in react is there any way