Nuxt Apollo WS + Django 3 + Graphene

[wlodevelopteam]

we create an app for instance messaging via subscriptions.
we used django as backend with below configurations:
Django==3.2
channels==3.0.5
graphql-ws==0.4.4

our test subscription is:

class Subscription(graphene.ObjectType):
    count_seconds = graphene.Float(up_to=graphene.Int())

    async def resolve_count_seconds(root, info, up_to):
        for i in range(up_to):
            yield i
            print(i)
            await asyncio.sleep(1.)
        yield up_to

everything is ok in graphql ui via http://127.0.0.1:8000/graphql and below query:
subscription doCountSeconds { countSeconds(upTo:30) }

--> so we need call this from our frontend

and frontside use:
"@nuxtjs/apollo": "^5.0.0-alpha.5",
"nuxt": "^3.3.1"

and our nuxt configuration:

import { defineNuxtConfig } from 'nuxt/config'
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    modules: ['@nuxtjs/apollo'],

    apollo: {
        autoImports: true,
        clients: {
            default: {
                httpEndpoint: 'http://127.0.0.1:8000/graphql',
                wsEndpoint: 'ws://127.0.0.1:8000/subscriptions',
            }
        },
    },
})

apollo plugin:

import {provideApolloClient} from '@vue/apollo-composable'

export default defineNuxtPlugin(() => {
  provideApolloClient(useApollo().clients.default)
})

but we have two problem:

1. django accept 'graphql-ws' as subprotocol but nuxt/apollo always sent 'graphql-transport-ws' so backend, reject our connection. how can is send graphql-ws as protocol?

WebSocket HANDSHAKING /subscriptions [127.0.0.1:54660]
WebSocket REJECT /subscriptions [127.0.0.1:54660]
WebSocket DISCONNECT /subscriptions [127.0.0.1:54660]

2. how we can receive data (count of number) in our front?

thank you

[eslamelhadedy]

same problem