Execute a mutation multiple times over the same connection

[tadej321]

This is not so much of an issue but more of a question.

I have a websocket server to which I connect with my web app. I can successfully execute a mutation over websockets but what happens is that a connection is opened and then closed after the server finishes the operation and returns the data. What I would like to achieve (if it is even possible) is to open a connection to my server socket and keep it opened so that a mutation can be executed multiple times (same schema but with different payload) over that same socket.

Here is my webserver snippet:

// nodemodule imports
import "core-js/stable";
import "regenerator-runtime/runtime";
import 'dotenv/config';
import cors from 'cors';
import express from 'express';
import {ApolloServer} from "apollo-server-express";
import bodyParser from "body-parser";

// project imports
import schema from "./graphql/modules";
import context from "./utils/context";
import socketContext from './utils/webSockets/context'
import error from "./utils/error";
import config from "../config";
import {useServer} from "graphql-ws/lib/use/ws";
import { WebSocketServer, Server } from 'ws';
const { graphqlUploadExpress } = require('graphql-upload');
import {onConnect, onError, onComplete, onNext, onSubscribe, onDisconnect, onClose, onOperation} from "./utils/webSockets/hooks"

const app = express();

const env = process.env.NODE_ENV || "development"

let corsOptions = {
  credentials: true,
  origin: ''
};
app.use(graphqlUploadExpress());

app.use((req,res, next) => {
  const origin = req.headers.origin;
  corsOptions.origin = config.origins.find(allowedOrigin => allowedOrigin === origin)

  next();
});

app.use(cors(corsOptions))


app.get('/healthcheck', ((req, res) => {
  res.sendStatus(200)
}))

app.use('/graphql', bodyParser.json({limit:"100mb"}));


const apolloServer = new ApolloServer({
  introspection: env === 'development' || env === 'client_production',
  playground: env === 'development' || env === 'client_production',
  schema,
  uploads: false,
  formatError: error,
  context: context,
});

apolloServer.applyMiddleware({app})


const server = app.listen(4000, () => {
  // create and use the websocket server
  const wsServer = new WebSocketServer({
    server,
    path: '/graphql',
  });

  useServer({
    context: socketContext,
    schema,
    onConnect,
    onSubscribe,
    onNext,
    onError,
    onComplete,
    onDisconnect,
    onClose,
    onOperation
  }, wsServer);
});

And here is my Apollo client snippet:

import { createClient } from 'graphql-ws';
import {apiUri} from "../config";
import React, {useEffect, useState} from "react";
import {GraphQLWsLink} from "@apollo/client/link/subscriptions";


const client = createClient({
  url: apiUri.wsUrl,
  on: {
    connected: (socket) => {
      console.log('Connected', socket)
    },
    closed: (res) => {
      console.log('Closed', res)
    }
  }
});

const link = new GraphQLWsLink(client);


async function fetch (query, options) {

  return await new Promise((resolve, reject) => {
    let result;

    link.request({query, variables: options.variables}).subscribe(
      data => result = data, 
      (err) => reject,
      () => resolve(result)
    )

  });
}



export const useSocketMutation = (query, options) => {

  if (query.definitions[0].operation !== 'mutation') throw new Error('operation should be a mutation')

  const [data, setData] = useState()
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState()

  return [
    (executeOptions) => fetch(query, executeOptions ? executeOptions.constructor.name === 'SyntheticBaseEvent' ? options : executeOptions : options)
      .catch(e => {
        setLoading(false)
        setError(e)
        return e
      }).then(data => {
        setLoading(false)
        setData(data)
        return data
      }),
    {data, loading, error}
  ]
}

What I did above is I created a React hook similar to the useMutation. It is called for example every time a user enters something in an input field. So the mutation schema is always the same only its payload is different.

What happenes in the network tab under ws when the mutation is executed is this:

On the server side I have also logged each step of establishing a connection:

As you can see the operation is completed and the it disconnects and closes the socket.

[enisdenjo]

Hey there,

you have 2 options:

1. Use the client in lazy = false mode which will establish a connection with the server on create and keep it alive
2. Use the client's lazyCloseTimeout option