Show todos immediately after subscribe() to a channel and publish() to the same channel

[adityapant1286]

I am fairly new to using graphql-yoga, so forgive me if this is a naive question or mistake from my side.

Libraries used:

Backend

• graphql-yoga
• ws
• graphql-ws

Frontend

• solid-js
• wonka

My understanding, there is something I am missing in the schema definition which is not showing the todo list when tried accessing Yoga Graphiql explorer.
The documentation mentioned the schema as a parameter. The schema definition required for this library is missing. Need some inputs on what am I missing.

Screenshot

Codesandbox

https://codesandbox.io/s/currying-firefly-pmgme6

Stackblitz

https://stackblitz.com/edit/node-p64u5i

Code Snippets

Schema definition

import { createPubSub } from 'graphql-yoga';
import { Todo } from "./types";

let todos = [
    {
        id: "1",
        title: "Learn GraphQL + Solidjs",
        completed: false
    }
];

// channel
const TODOS_CHANNEL = "TODOS_CHANNEL";

// pubsub
const pubSub = createPubSub();

const publishToChannel = (data: any) => pubSub.publish(TODOS_CHANNEL, data);

// Type def
const typeDefs = [`
    type Todo {
        id: ID!
        title: String!
        completed: Boolean!
    }

    type Query {
        getTodos: [Todo]!
    }

    type Mutation {
        addTodo(title: String!): Todo!
    }

    type Subscription {
        todos: [Todo!]
    }
`];

// Resolvers
const resolvers = {
    Query: {
        getTodos: () => todos
    },
    Mutation: {
        addTodo: (_: unknown, { title }: Todo) => {
            const newTodo = {
                id: "" + (todos.length + 1),
                title,
                completed: false
            };
            todos.push(newTodo);
            publishToChannel({ todos });
            return newTodo;
        },
    Subscription: {
        todos: {
            subscribe: () => {
                const res = pubSub.subscribe(TODOS_CHANNEL);
                publishToChannel({ todos });
                return res;
            }
        },
    },
};

export const schema = {
    resolvers,
    typeDefs
};

Server backend

import { createServer } from "graphql-yoga";
import { WebSocketServer } from "ws";
import { useServer } from "graphql-ws/lib/use/ws";

import { schema } from "./src/schema";
import { execute, ExecutionArgs, subscribe } from "graphql";

async function main() {
    const yogaApp = createServer({
        schema,
        graphiql: {
            subscriptionsProtocol: 'WS', // use WebSockets instead of SSE
        },
    });

    const server = await yogaApp.start();
    const wsServer = new WebSocketServer({
        server,
        path: yogaApp.getAddressInfo().endpoint
    });

    type EnvelopedExecutionArgs = ExecutionArgs & {
        rootValue: {
            execute: typeof execute;
            subscribe: typeof subscribe;
        };
    };

    useServer(
        {
            execute: (args: any) => (args as EnvelopedExecutionArgs).rootValue.execute(args),
            subscribe: (args: any) => (args as EnvelopedExecutionArgs).rootValue.subscribe(args),
            onSubscribe: async (ctx, msg) => {
                const { schema, execute, subscribe, contextFactory, parse, validate } =
                    yogaApp.getEnveloped(ctx);

                const args: EnvelopedExecutionArgs = {
                    schema,
                    operationName: msg.payload.operationName,
                    document: parse(msg.payload.query),
                    variableValues: msg.payload.variables,
                    contextValue: await contextFactory(),
                    rootValue: {
                        execute,
                        subscribe,
                    },
                };

                const errors = validate(args.schema, args.document);
                if (errors.length) return errors;
                return args;
            },
        },
        wsServer,
    );

}

main().catch((e) => {
    console.error(e);
    process.exit(1);
});

Expected Behaviour

It should show the initial todo item as soon as it has subscribed and published in schema definition.
Todo item - declared in schema

    {
        id: "1",
        title: "Learn GraphQL + Solidjs",
        completed: false
    }

Actual Behaviour
It does not show/return initial todo item.
After adding a new todo (using addTodo) it shows two todo items. So I believe it is unable to return initial whenever refresh the browser or run subscribe on Yoga Graphiql explorer.

[ardatan]

Because you publish before client subscribes the topic. .subscribe method returns AsyncIterable to the client to be subscribed. So .subscribe doesn't start listening immediately. It is a kind of race condition.
I think you should use Live Queries instead.
cc @n1ru4l

[n1ru4l]

This is documented here https://www.the-guild.dev/graphql/yoga-server/v3/features/subscriptions#subscriptions-with-initial-value