Can't get Subscriptions on Strawberry Shake to generate

[jkears]

We have easily generated both Query and Mutations within a Strawberry Shake client however no matter how much we have tried we can't seem to achieve the same with Subscriptions.

We created the server-side subscription and tested it using GraphQL playground. It works great!

When we attempt to include this subscription within our Blazor test app we can't seem to get the client CLI to add it to our client and thus can't utilize it from within our WASM Blazor apps.

The following subscription works within GraphQL Play Ground IDE...

subscription onDomainEvent  (topic: "EquipmentWasDroppedOffDomainEvent" )
    {
        action,
        createdAt,
        generatedFromModelVersion,
        generatedSequence,
        id,
        modelKey,
        payload
    }

However, when we add this graphql script (below) in a graphql file within our Blazor app, we can't seem to get the Strawberry Shake generation to pull it in.

subscription OnDomainEvent($topic: string)
{
    onDomainEvent  (topic: $topic)
    {
        action,
        createdAt,
        generatedFromModelVersion,
        generatedSequence,
        id,
        modelKey,
        payload
    }
}

Are subscriptions not supported in Blazor WASM applications?

[michaelstaib]

Can you post your setup code?

[jkears]

Yes and thank you for your prompt reply...

The subscription in question is to publish all domain events that were generated via a command. This is done within the MediatR behaviour pipeline post db commit ....

 public class UnitOfWorkPipeLineBehavior<TRequest, TResponse> : IPipelineBehavior<TRequest, TResponse> where TRequest : IRequest<TResponse>
    {
        private readonly IUnitOfWork _unitOfWork;
        private readonly ILogger<TRequest> _logger;
        private readonly ITopicEventSender _eventSender;
        private readonly IMapper _mapper;

        public UnitOfWorkPipeLineBehavior(IUnitOfWork unitOfWork, ILogger<TRequest> logger, ITopicEventSender eventSender, IMapper mapper)
        {
            _unitOfWork = unitOfWork;
            _logger = logger;
            _eventSender = eventSender;
            _mapper = mapper;
        }

        public async Task<TResponse> Handle(TRequest request, CancellationToken cancellationToken, RequestHandlerDelegate<TResponse> next)
        {
            try
            {
                
                // Pre Handler activity


                // Invoke Next Handler
                var response = await next();
                if (response is not IBaseResponse responseBase || responseBase.Error) return response;


                // Post Handler activity
                if (request is ICommand<TResponse> command)
                {
                    if (_unitOfWork != null && command.IncludeUnitOfWorkCommitBehavior) await _unitOfWork.CommitAsync();
                }
                if (request is ICommand<TResponse> command1)
                {
                    if (_unitOfWork != null && command1.IncludeUnitOfWorkCommitBehavior)
                    {
                        foreach (var aggregateEvent in _unitOfWork.AggregateEvents)
                        {
                            var x = _mapper.Map<AggregateEvent>(aggregateEvent);
                            var a = aggregateEvent.Action;

                            await _eventSender
                                .SendAsync(a, x)
                                .ConfigureAwait(false);
                        }
                    }
                }
                return response;
            }
            catch (Exception ex)
            {
                var errorMessage = $"Exception caught in UnitOfWork Pipeline Behavior: {ex.Message}";
                _logger.LogError(errorMessage);
                throw;
            }
        }


    }

Here is the aggregate mutation resolver, service-side (Note: this works great in SS Demo client) ...

    [ExtendObjectType(OperationTypeNames.Mutation)]
    public class DailyFloatSheetGraphQLMutations
    {
        private readonly IMediator _commandDispatcher;
        private readonly IMapper _mapper;
        private readonly ILogger<DailyFloatSheetGraphQLMutation> _logger;

        public DailyFloatSheetGraphQLMutation(IMediator commandDispatcher, IMapper mapper, ILogger<DailyFloatSheetGraphQLMutation> logger)
        {
            _commandDispatcher = commandDispatcher;
            _mapper = mapper;
            _logger = logger;
        }
        public async Task<Response<Guid>> CreateDailyFloatSheet(CreateFloatSheetRequest request)
        {
            try
            {
                var domainCommand = _mapper.Map<CreateFloatSheetCommand>(request);
                domainCommand.IncludeUnitOfWorkCommitBehavior = true;  // inform UnitOfWork Pipeline to commit
                var result = await _commandDispatcher.Send(domainCommand);
                return result;
            }
            catch (Exception ex)
            {
                _logger.LogError($" Create Daily Float Sheet Failed:  {ex.Message}");
                throw;
            }
        }
    }

Here is the aggregate Query type (Note: this works great in SS Demo client) ...

    [ExtendObjectType(OperationTypeNames.Query)]
    public class DailyFloatSheetGraphQLQueries: IDisposable
    {
        private readonly IMapper _mapper;
        private readonly IDbContextFactory<AppDbContext> _factory;
        private readonly AppDbContext? _context;
        public DailyFloatSheetGraphQLQuery(IMapper mapper, IDbContextFactory<AppDbContext> factory)
        {
            _mapper = mapper;
            _factory = factory;
            _context = _factory.CreateDbContext();
        }

        public async Task<DailyFloatSheet> GetDailyFloatSheetById(Guid id)
        {
            ///await using var context = await _factory.CreateDbContextAsync();

            return _mapper.Map<DailyFloatSheet>(_context.DailyFloatSheets.Where(x => x.Id == id));
        }
         
        [UsePaging]
        [UseProjection]
        [UseFiltering]
        [UseSorting]
        public IAsyncEnumerable<DailyFloatSheet> GetDailyFloatSheets()
        {
             //using var context = _factory.CreateDbContext();
            
                var result = _context.DailyFloatSheets.ProjectTo<DailyFloatSheet>(_mapper.ConfigurationProvider).AsAsyncEnumerable();
                return result;

        }

        public void Dispose()
        {
            _context?.Dispose();
        }
    }

Here is the domain service subscription, which publishes any domain event generated by the service (Note: this does not surface within SS Demo client) ...

[ExtendObjectType(OperationTypeNames.Subscription)]
public class EquipmentLocationGraphQLEventSubscriptions
{
    [Subscribe]
    public AggregateEvent OnDomainEvent(
       [Topic] string topic,
       [EventMessage] AggregateEvent domainEvent) => domainEvent;
}

Here is the GraphQL configuration...

builder.Services.AddGraphQLServer()

    .AddType<ErrorResponse>()
    .AddType<DailyFloatSheet>()
    .AddType<EquipmentAttachment>()
    .AddType<AggregateEvent>()

    .AddMutationType()
        .AddTypeExtension<DailyFloatSheetGraphQLMutations>()
        .AddTypeExtension<EquipmentAttachmentGraphQLMutations>()
    .AddQueryType()
        .AddTypeExtension<DailyFloatSheetGraphQLQueries>()
        .AddTypeExtension<EquipmentAttachmentGraphQLQueries>()
    .AddSubscriptionType()
        .AddTypeExtension<EquipmentLocationGraphQLEventSubscriptions>()
        .AddTypeExtension<EquipmentAttachmentGraphQLEventSubscriptions>()
    

    .AddProjections()
    .AddFiltering()
    .AddSorting()

    .RegisterDbContext<AppDbContext>(kind: DbContextKind.Pooled);

Here is the Blazor Demo app program.cs

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Demo;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

builder.Services
    .AddEquipmentLocationClient()
    .ConfigureHttpClient(client => client.BaseAddress = new Uri("https://localhost:7231/graphql/"))
    .ConfigureWebSocketClient(client => client.Uri = new Uri("ws://localhost:7231/graphql/"));


await builder.Build().RunAsync();

Here is the graphqlr.json ....

{
  "schema": "schema.graphql",
  "documents": "**/*.graphql",
  "extensions": {
    "strawberryShake": {
      "name": "EquipmentLocationClient",
      "namespace": "Demo.GraphQL",
      "url": "https://localhost:7231/graphql/",
      "dependencyInjection": true,
      "strictSchemaValidation": true,
      "hashAlgorithm": "md5",
      "useSingleFile": true,
      "requestStrategy": "Default",
      "outputDirectoryName": "Generated",
      "noStore": false,
      "emitGeneratedCode": true,
      "razorComponents": false,
      "records": {
        "inputs": false,
        "entities": false
      },
      "transportProfiles": [
        {
          "default": "Http",
          "subscription": "WebSocket"
        }
      ]
    }
  }
}

Here is the AllDailyFloatSheets.graphql query ...

query GetDailyFloatSheets 
{
    dailyFloatSheets
    {
        id,
        comment
        equipmentLocationRecords
        {
            id
        }
    }
}

Here is the CreateDailyFloatSheet.graphql mutation ...

mutation CreateDailyFloatSheet($dailyFloatSheet: DailyFloatSheetInput!)
{
	createDailyFloatSheet(request: { dailyFloatSheet: $dailyFloatSheet }) 
	{
		responseData,
		message,
		instrumentationResults,
		error,
		errorMessages
		{
			errorCode,
			message
		},
		validationErrorMessages
		{
	     	propertyName,
			errorMessage,
			severity,
			errorCode
		}
	}
}

Here is the OnDomainEvent.graphql subscription ...

subscription OnDomainEvent($topic: string)
{
    onDomainEvent  (topic: $topic)
    {
        action,
        createdAt,
        generatedFromModelVersion,
        generatedSequence,
        id,
        modelKey,
        payload
    }
}

Here is the Blazor test page OnInitialized method ....

  protected override void OnInitialized()
    {
        storeGuids = DemoClient
            .GetDailyFloatSheets
            .Watch(StrawberryShake.ExecutionStrategy.CacheFirst)
            .Where(t => !t.Errors.Any())
            .Select(t => t.Data.DailyFloatSheets.Select(t => t.Comment).ToArray())
            .Subscribe(result =>
            {
                comments = result;
                StateHasChanged();
            });

        storeEANames = DemoClient
            .GetEquipmentAttachements
            .Watch(StrawberryShake.ExecutionStrategy.CacheFirst)
            .Where(t => !t.Errors.Any())
            .Select(t => t.Data.EquipmentAttachments
                .Where(x => x.AttachmentType == AttachmentType.Equipment)
                .Select(t => t.Name).ToArray())
            .Subscribe(result =>
            {
                eaNames = result;
                StateHasChanged();
            });

            **_// Note : we do not see the OnDomainEvent in DemoClient post regeneration and build. 

            //
            //    var session =
            //        DemoClient
            //            .OnDomainEvent("EquipmentDroppedOff")
            //            .Watch()
            //            .Subscribe(result =>
            //            {
            //// do something with the result
            //            });_**


    }

Client project ...

Service is based upon this domain model...

Once again, all but the subscription show up on the SS DemoClient and as mentioned, we are able to trigger this subscription within GraphQL Playground, so we kind of feel we've done all that we should have, please advise otherwise.

Please let me know if you require additional information.

[jkears]

In our testing we had the Blazor project within the same as the GraphQL service. The reason it was not generating was that you need to have the domain service running while you build the Blazor project, and this was locking files (we think).

We moved the Blazor project to a stand-alone project and we were able to generate the subscription handler within the SS client.
Note: we slightly modified the subscription script in the client (it was missing String!).

Now we have the handler to invoke, however, unfortunately this is not yet getting triggered, it is in GraphQL Playground but not in the Blazor client.

[jkears]

The issue was related to the using a non secured web socket (Chrome)

In the Blazor app, we changed from ....
.ConfigureWebSocketClient(client => client.Uri = new Uri("ws://localhost:7231/graphql/"));

To ...
.ConfigureWebSocketClient(client => client.Uri = new Uri("wss://localhost:7231/graphql/"));

... and now we are properly receiving responses for any domain event created on the server and published through the event dispatcher.

That said however, when we try to run this via a Gateway, the WebSocket connection immediately terminates with the following;

"You must declare a subscribe resolver for subscription fields".

Is there documentation that describes how to declare a subscribe resolver for a downstream subscription?