Why doesn't my subscription work?

[omega-uo]

Hi, I'm a complete beginner, unfortunately with Laravel, also with Lighthouse, and with Pusher. I want to develop a mobile app with Flutter that should communicate with a Laravel backend via graphQL. The queries and mutations work. Subscriptions don't work at all, no matter what I do. Can anyone give me a tip?

Currently I am trying to get the following configuration to work:
First, I created a completely new laravel project, via:

composer create-project laravel/laravel laravel-lighthouse-pusher-subscription
composer require nuwave/lighthouse
php artisan vendor:publish --tag=lighthouse-schema
php artisan lighthouse:ide-helper
php artisan vendor:publish --tag=lighthouse-config
composer require pusher/pusher-php-server
composer require mll-lab/laravel-graphiql
php artisan vendor:publish --tag=graphiql-config
php artisan graphiql:download-assets

I've added Nuwave\Lighthouse\Subscriptions\SubscriptionServiceProvider::class, in bootstrap\providers.php.

I've created two models, author and blog, as well as a, in my opinion, suitable scheme:

type Query {
    authors: [Author!]! @all
    blogs: [Blog!]! @all }

type Mutation {
    createBlog(input: CreateBlogInput! @spread): Blog! @broadcast(subscription: "blogInserted") @create }

type Subscription {
    blogInserted: Blog }

input CreateBlogInput {
    title: String!
    content: String!
    author: CreateAuthorBelongsTo }

input CreateAuthorBelongsTo {
    connect: ID
    create: CreateAuthorInput }

input CreateAuthorInput {
    name: String! }

type Blog {
    id: ID!
    title: String!
    content: String!
    author: Author!
    created_at: DateTime!
    updated_at: DateTime! }

type Author {
    id: ID!
    name: String!
    created_at: DateTime!
    updated_at: DateTime!
    blogs: [Blog!]! }

In .env I defined the pusher variables:

PUSHER_APP_ID="..."
PUSHER_APP_KEY="..."
PUSHER_APP_SECRET="..."
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_APP_CLUSTER="eu"
PUSHER_USE_TLS=true
PUSHER_SCHEME=https

BROADCAST_CONNECTION=pusher
BROADCAST_DRIVER=pusher

LIGHTHOUSE_BROADCASTER=pusher

The mutation:

mutation {
  createBlog(input: { title: "hohoho", content: "hohoho",author: {connect: "2"} }) {
    id
    title } }

works. It always creates a new record in the database. The job Nuwave\Lighthouse\Subscriptions\BroadcastSubscriptionJob is queued and is executed shortly afterwards. There are no errors in the laravel.log. But nothing appears in the pusher debug console.

Before that, I start the subscription:

subscription {
  blogInserted {
    id
    title } }

in the hope that this will notify me of the new blog-entry. Nothing happens via the Altair GraphQL client. This request also does not arrive in the pusher debug console. Via graphiQL, the connection breaks immediately or is not established at all, the error message is: "errors": [ { "isTrusted": true } ]

The functions authorize and filter of class BlogInserted (extends GraphQLSubscription) returns constant true.

Because I'm not sure, I'm testing with two different subscriptions URLs:
a.) GRAPHIQL_SUBSCRIPTION_ENDPOINT="ws://127.0.0.1:8801/graphql"
b.) GRAPHIQL_SUBSCRIPTION_ENDPOINT="wss://ws-${PUSHER_APP_CLUSTER}.pusher.com:443/app/${PUSHER_APP_KEY}?protocol=7"

Does anyone have an idea how I can find my mistake?

[datkanber]

To get your Laravel + Lighthouse + Pusher subscription setup working with Flutter, it's important to ensure all components are properly configured and compatible. Based on your detailed description, here are some common issues and their solutions:

1. WebSocket Server for Lighthouse Subscriptions
   Lighthouse requires a WebSocket server to handle GraphQL subscriptions. Laravel does not natively support WebSocket handling, so you'll need to set up a WebSocket server, such as:

Laravel WebSocket Package:

composer require beyondcode/laravel-websockets php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider" --tag="config"
Update the .env file:

PUSHER_APP_ID=local PUSHER_APP_KEY=local PUSHER_APP_SECRET=local PUSHER_APP_CLUSTER=mt1 Update your broadcasting.php:

'pusher' => [ 'driver' => 'pusher', 'key' => env('PUSHER_APP_KEY'), 'secret' => env('PUSHER_APP_SECRET'), 'app_id' => env('PUSHER_APP_ID'), 'options' => [ 'cluster' => env('PUSHER_APP_CLUSTER'), 'useTLS' => false, 'host' => '127.0.0.1', 'port' => 6001, 'scheme' => 'http', ], ],

Start the WebSocket server:

php artisan websockets:serve
Lighthouse will now use the WebSocket server for subscriptions.

2. Ensure Pusher Configuration Matches
   The Lighthouse and Pusher configurations must align with the WebSocket server setup. Double-check the LIGHTHOUSE_BROADCASTER and PUSHER_* environment variables. Use the following GRAPHIQL_SUBSCRIPTION_ENDPOINT for local testing:

GRAPHIQL_SUBSCRIPTION_ENDPOINT="ws://127.0.0.1:6001/graphql"

If you're deploying to production, use:
GRAPHIQL_SUBSCRIPTION_ENDPOINT="wss://your-websocket-server/graphql"

3. Broadcasting Setup
   Ensure you’ve set up broadcasting correctly in Laravel. Run the following command to generate the broadcasting configuration:

php artisan queue:work

Then, verify that jobs are being dispatched and processed. Check jobs table logs if you're using the database queue.

4. Verify Lighthouse Subscription Class
   The subscription resolver class should correctly implement the GraphQLSubscription interface. For instance:

namespace App\GraphQL\Subscriptions;

use Nuwave\Lighthouse\Subscriptions\GraphQLSubscription;

class BlogInserted extends GraphQLSubscription
`{
public function authorize($rootValue, array $args, $context)
{
return true; // Ensure this returns true
}

public function filter($rootValue, array $args, $context)
{
    return true; // Ensure this returns true
}

}`

Ensure you’ve registered this subscription in the lighthouse.php config.

5. Altair GraphQL Client
   Altair often disconnects if the WebSocket configuration is incorrect. Confirm you're using the correct URL:

For local:

ws://127.0.0.1:6001/graphql

For production (Pusher):

wss://ws-${PUSHER_APP_CLUSTER}.pusher.com/app/${PUSHER_APP_KEY}?protocol=7

6. Debugging Tips
   Check WebSocket Connection: Use browser developer tools or WebSocket testing tools to verify the WebSocket connection.
   Inspect Pusher Console: If nothing shows in the Pusher console, the connection between Laravel and Pusher might not be established.
   Enable Laravel Debugging: Temporarily set APP_DEBUG=true in .env and inspect logs.

Manually Test Events: Test Pusher by broadcasting a manual event to see if it reaches the Pusher console:

event(new \App\Events\BlogCreated($blog));

7. Consider Flutter Integration
   On the Flutter side, use the graphql_flutter package to implement GraphQL subscriptions. Ensure the subscription endpoint matches the backend configuration.

Example:

final HttpLink httpLink = HttpLink('http://localhost/graphql'); final WebSocketLink websocketLink = WebSocketLink('ws://localhost:6001/graphql');

Combine them:

final Link link = Link.split( (request) => request.isSubscription, websocketLink, httpLink, );

Conclusion
Follow these steps to troubleshoot and configure your setup. Start with the WebSocket server, verify broadcasting and subscription configurations, and test manually. If issues persist, share specific logs or errors for further assistance.

[omega-uo]

Thank you very much for your detailed response ! I'm really looking forward to applying the tips and will report back here about my results. Thank you again for your help !