Laravel lighouse : ws://127.0.0.1:8000/graphql/subscriptions ERR 404 NOT FOUND

Hello,

I'm new to lighthouse laravel.

I manage to do most things.

But on the other hand: I have my subscription server which does not seem to be activated.

On the laravel/lightouse side: I followed the official doc word for word

Client side:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'

import { Provider } from 'react-redux'
import store from './redux/store'

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  split
} from '@apollo/client'

import { setContext } from '@apollo/client/link/context'
import createUploadLink from 'apollo-upload-client/createUploadLink.mjs'

import { getMainDefinition } from '@apollo/client/utilities'
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'

const httpLink = createUploadLink({
  // uri: 'http://127.0.0.1:8000/graphql'
  uri: `${process.env.REACT_APP_GRAPHQL_SERVER}/graphql`
})

const wsLink = new GraphQLWsLink(createClient({
  url: 'ws://127.0.0.1:8000/graphql/subscriptions',
  // url: 'ws://127.0.0.1:6001/app/app-key?protocol=7&client=js&version=8.3.0&flash=false/subscription',
  options: {
    reconnect: true,
    connectionParams: {
      authEndpoint: 'http://127.0.0.1:8000/graphql/subscriptions/auth', // 'http://127.0.0.1:8000/graphql/subscriptions/auth',
      authToken: localStorage.getItem('token')
    }
  }
}))

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token')
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ''
    }
  }
})

const splitLink = split(
  ({ query }) => {
    const definition = getMainDefinition(query)
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    )
  },
  wsLink,
  authLink.concat(httpLink)
)

const client = new ApolloClient({
  link: splitLink,
  cache: new InMemoryCache()
})

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <Provider store={store}>
      <ApolloProvider client={client}>

          <App />

      </ApolloProvider>
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
)

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals()

I don't understand why is inaccessible ws://127.0.0.1:8000/graphql/subscriptions ? Do you have a solution/idea?

Thanks to you.