Search code examples
subscriptionlaravel-lighthouse

Laravel Lighthouse, how can i get all array data when i do subscription?


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?


Solution

  • 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.