0

I do subscription with laravel + Lighthouse + Laravel WebSockets + vue-apollo tech.

When i subscription, i wanna get all array data, but i only got changed data.

My schema.graphql is below.

type Mutation {
    updateTest(id: ID!, name: String, result: Int): Test @update
        @broadcast(subscription: "testSub")
}

type Subscription {
    testSub(id: ID): Test
}

type Test {
    id: ID!
    name: String
    result: Int
}

This is my vue-apollo code

const subQuery = gql`subscription testSub($id: ID) {
                testSub(id:$id) {
                    id
                    name
                }
            }`

            const observer = this.$apollo.subscribe({
                query: subQuery,
                variables () {
                    return {
                        id: 14,
                    }
                },
            })

            observer.subscribe({
                next (data) {
                    console.log('subscribe')
                    console.log(data)
                },
                error (error) {
                    console.log('err')
                    console.error(error)
                },
            })

When i do mutation like below.

mutation {
    updateTest(id:14, name: "hahaha", result:1) {
        id
        name
    }
}

vue-apollo get subscription like pic.

enter image description here

I recognized return is only changed value instead of all data. So i change subscription schema like below.

type Subscription {
    testSub: [Test] @all
}

I also changed vue-apollo code.

const subQuery = gql`subscription testSub {  #delete argument
                testSub {                                #delete argument 
                    id
                    name
                }
            }`

            const observer = this.$apollo.subscribe({
                query: subQuery,
                variables () {
                    return {
                        id: 14,
                    }
                },
            })

            observer.subscribe({
                next (data) {
                    console.log('subscribe')
                    console.log(data)
                },
                error (error) {
                    console.log('err')
                    console.error(error)
                },
            })

When i do mutation after npm run dev and websocket start, i got this error.

enter image description here

But i already made testSub.

php artisan lighthouse:subscription testSub

This is my testSub file.

<?php

namespace App\GraphQL\Subscriptions;

use Illuminate\Support\Str;
use Illuminate\Http\Request;
use GraphQL\Type\Definition\ResolveInfo;
use Nuwave\Lighthouse\Subscriptions\Subscriber;
use Nuwave\Lighthouse\Schema\Types\GraphQLSubscription;
use Nuwave\Lighthouse\Support\Contracts\GraphQLContext;
use App\Test as Test2;
use App\Events\test;

class TestSub extends GraphQLSubscription
{
    /**
     * Check if subscriber is allowed to listen to the subscription.
     *
     * @param  \Nuwave\Lighthouse\Subscriptions\Subscriber  $subscriber
     * @param  \Illuminate\Http\Request  $request
     * @return bool
     */
    public function authorize(Subscriber $subscriber, Request $request): bool
    {
        // TODO implement authorize
        return true;
    }

    /**
     * Filter which subscribers should receive the subscription.
     *
     * @param  \Nuwave\Lighthouse\Subscriptions\Subscriber  $subscriber
     * @param  mixed  $root
     * @return bool
     */
    public function filter(Subscriber $subscriber, $root): bool
    {
        return true;
        // TODO implement filter
    }

    public function encodeTopic(Subscriber $subscriber, string $fieldName): string
    {
        // Optionally create a unique topic name based on the
        // `author` argument.
        //$args = $subscriber->args;

        //return Str::snake($fieldName).':'.$args['author'];
        //return Str::snake($fieldName).':1';
        return 'testSub';
    }

    /**
     * Decode topic name.
     *
     * @param  string  $fieldName
     * @param  \App\Post  $root
     * @return string
     */
    public function decodeTopic(string $fieldName, $root): string
    {
        // Decode the topic name if the `encodeTopic` has been overwritten.
        $author_id = $root->author_id;

        //return Str::snake($fieldName).':'.$author_id;
        return 'testSub';
    }

    public function resolve($root, array $args, GraphQLContext $context, ResolveInfo $resolveInfo): Test2
    {
        event(new test());
        return $root;
    }

}

How can i get all array data instead of changed data?

Jeongkuk Seo
  • 127
  • 2
  • 15

1 Answers1

1

In your vue-apollo code you have this:

 gql`subscription testSub($id: ID) {
                testSub(id:$id) {
                    id
                    name
                }
            }`

So, think that it is like a query. Everytime the subscription is fired, you are querying the id and name. If you want to also query the result, just add it:

 gql`subscription testSub($id: ID) {
                testSub(id:$id) {
                    id
                    name
                    result # <--
                }
            }`

There is no way to tell to apollo that has to fetch "all" fields of the Test type. You have to explicit those fields.

Enzo Notario
  • 639
  • 4
  • 9
  • My question was how can i get all data of Test type when subscription is fired. not field. @Enzo – Jeongkuk Seo Oct 24 '19 at 01:51
  • You can't get "all data". You have to SPICIFY what data you want to get when the subscription is fired. So add all those fields: ``` gql`subscription testSub($id: ID) { testSub(id:$id) { id name result # <-- } }` ``` – Enzo Notario Oct 24 '19 at 12:59
  • There is no way to get all data u.u.. i got it. Thanks your help – Jeongkuk Seo Oct 25 '19 at 01:14
  • Well, there is a way, but you have to SPECIFY what is "all data" for you (I mean, you have to include all the fields you want to get) – Enzo Notario Oct 25 '19 at 12:41