Question: Unable to get initial data using subscription

[adityapant1286]

I am fairly new to using graphql-ws, 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

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.

[enisdenjo]

This seems like a question about GraphQL subscriptions in general or graphql-yoga, rather than graphql-ws.

Are you sure that createPubSub has a queue? Meaning that if something gets published before anyone is subscribed, it would get queued up and flushed when someone finally subscribes?

[adityapant1286]

Hi @enisdenjo, I think you're right. Unfortunately, there are only two methods in PubSub. It is a bit hard to know whether calling .publish() immediately after .subscribe() put the data in a queue. I will reach out to graphql-yoga team for more information.
Thanks for your time and comments.

[enisdenjo]

I don't think the pubsub has a queue, .publish() only dispatches events to currently active subscribers. A queue is not easy to implement as something offered out-of-the-box.

I'd recommend you making one yourself. To make it efficient, you'd have to implement the pubsub yourself too - but that is not too complicated. Just be wary to empty the queue every once in a while to avoid memory leaks.

[enisdenjo]

Of course, you can also just make sure the app subscribes first, before creating any items. 🤷‍♂️