How to access published data in Vue3 client

[Dinu98]

Hello,

I looked at the recipes posted and I decided to implement the standard one under the 'Use the client' topic.

Here is my implemented code for the client:

import { createClient } from "graphql-ws";

const client = createClient({
url: "ws://localhost:3000/subscriptions",
});

async function execute(payload) {
return new Promise((resolve, reject) => {
let result;
client.subscribe(payload, {
next: (data) => (result = data),
error: reject,
complete: () => resolve(result),
});
});
}

// // subscription
(async () => {
  const onNext = (data) => {
    /* handle incoming values */
    console.log(data);
  };

  let unsubscribe = (data) => {
    /* complete the subscription */
    console.log(data);
  };

  await new Promise((resolve, reject) => {
    unsubscribe = client.subscribe(
      {
        query: 'subscription { test }',
      },
      {
        next: onNext,
        error: reject,
        complete: resolve,
      },
    );
  });

  console.log(unsubscribe);

})();

// // use
(async () => {
  try {
    const result = await execute({
      query: 'mutation { test }',
    });
    console.log(result);
    // complete
    // next = result = { data: { hello: 'Hello World!' } }
  } catch (err) {
    // error
  }
})();

I get the correct data when console.log(result) :
{
"data": {
"test": "test"
}
}

My server is configured properly because I get console logs such as 'Connect, Subscribe, Next, Complete'

This is my mutation :

    test: {
      type: GraphQLString,
      resolve: () => {
        pubsub.publish(TEST, { height: 'asd' });

        return "test";
      },
    },

This is my subscription :

        test: {
            type: GraphQLString,
            description: "Test",
            subscribe: (parent, args, context) => pubsub.asyncIterator(TEST)
        }

So my question is:

How should i proceed in order to get the published data in my Vue3 client?

I'd really appreciate your help, I'm stuck on this for quite some time.

[enisdenjo]

Sadly I have no experience with Vue whatsoever. Quite frankly, I don't even fully understand the question haha.

Sorry, but I cannot help you here.

[Dinu98]

I wanted to know how to access the published, meaning that for example, how should I proceed if I want to display a newly created object in the client?

[Dinu98]

Like, the data when i do pubsub.publish is supposed to come in this function ?
const onNext = (data) => {
/* handle incoming values */
console.log(data);
};

[enisdenjo]

Like, the data when i do pubsub.publish is supposed to come in this function ? const onNext = (data) => { /* handle incoming values */ console.log(data); };

Yes.

See the "use the client" quick start example in the README.

[Dinu98]

Managed to solve it, it was my mistake. I create 2 different instances of pubsub in the mutations folder and subscriptions folder, didn't know it's supposed to be the same instance.

[Dinu98]

Managed to solve it, it was my mistake. I created 2 different instances of pubsub in the mutations folder and subscriptions folder, didn't know it's supposed to be the same instance.

Thank you for your implication and fast responses.