DOMException: Failed to construct 'WebSocket': The URL '/graphql' is invalid.

[bmackio]

Actual behavior: After cloning chapter 7 and npm install then npm start the above error occurs when running the following query in /playground:

subscription { newPhoto { name url postedBy { name } } }
I was encountering the same error after following the directions in the book.

Also ws://localhost:4000/ does not connect, with the browser stating This site can’t be reached

Expected behavior: When the instructions are followed in the book, or when the repo is cloned and started, there should be no errors.

I suspect this has to do with new npm packages being released, but am seeking clarity as the repo seems to have been created 4 months ago with updates as recently as 2 months ago.

[bmackio]

This error is due to a discrepency between URLs recommended to use for queries in the playground: /playground vs. /graphql

Even though playground was recommended earlier (and is designated as the address on the server side), only /graphql will work when testing subscriptions in chapter 7.

Given the earlier setup of http to test graphql queries, it would follow that ws:// would be the place to test subscriptions, but the purpose of mentioning ws:// is not clear.

So, the above error was made more confusing by the mention of ws://localhost:4000/ which does not connect if you try to open in a browser window. Is there some additional step required to run websockets at this address? Is there any reason to open this address in the browser, or are you just pointing to the port utilized by websockets?

The text of the books states:

"By default, Apollo Server sets up a WebSocket at ws://localhost:4000. If you use the simple server configuration that we demonstrated at the beginning of Chapter 5, you’re using a configuration that supports WebSockets out of the box."*

@eveporcello can you please clarify?

*Porcello, Eve; Banks, Alex. Learning GraphQL: Declarative Data Fetching for Modern Web Apps (Kindle Locations 3886-3887). O'Reilly Media. Kindle Edition.

[bmackio]

Now, I've switched to using localhost:4000/graphql and the error no longer exists in the console, but this error comes up inside the results panel:

{
  "error": "Could not connect to websocket endpoint ws://localhost:4000/graphql. Please check if the endpoint url is correct."
}

I'll continue to update until I hear back, or until I fix the issue. Any help is appreciated.

[bmackio]

In general, this book is very good and specific up to chapter 7, then there are a few discrepancies. The above is one small example where more clarity is needed, but then the App.js code diverges from the previous example when Posting Photos is added as an example:

App.js from github repo "chapter-07"

render() {
        return (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={() =>
                        <Fragment>
                            <AuthorizedUser />
                            <Users />
                            <Photos />
                        </Fragment>
                    } />
                    <Route path="/newPhoto" component={PostPhoto} />
                    <Route component={({ location }) => <h1>"{location.pathname}" not found</h1>} />
                </Switch>
            </BrowserRouter>  
        )
    }

export default withApollo(App)

The above code follows the previous example in the book, but the App.js code below as it's suggested in the book in the postPhoto example does not contain the same or similar code:

const App = () => 
   <BrowserRouter > 
        ...
   </ BrowserRouter > 

export default App

As you can see, there's no withApollo or class App extends Component ... in the example from the book. These discrepencies should be addressed in this repo or somewhere else. Please advise.

[eveporcello]

I'll take a look and get back to you - thanks.

[eveporcello]

Check out your index.js file where we set up the server. Apollo Server now requires the use of a subscription endpoint when you set up the Playground. It will look like this:

    app.get('/playground', expressPlayground({ 
        endpoint: '/graphql',
        subscriptionEndpoint: '/graphql'  // just add this line
    }))

Regarding this passage: "By default, Apollo Server sets up a WebSocket at ws://localhost:4000. If you use the simple server configuration that we demonstrated at the beginning of Chapter 5, you’re using a configuration that supports WebSockets out of the box."

^^ We say that because if you use the simple Apollo Server from Chapter 5 (const { ApolloServer } = require('apollo-server')), you don't have to take the additional step of configuring the subscription endpoint for the playground. It's handled automatically.

Let me know how that goes. I'll leave the issue open in the meantime.

[bmackio]

@eveporcello thanks, but let me ask a potentially dumb question just to make it clear what I'm struggling to understand: Am I supposed to be able to see the graphql playground or something else when I enter ws://localhost:4000/ into the browser address bar and press return?

I'd think that address would be used to test subscription queries in the same way http queries can be tested via http://localhost:...

I followed the instructions from the book and added the subscriptionEndpoint as you instructed above, but I can't access websockets with the provided address. I suspect I'm either missing something so simple it's hard to see, or that that address doesn't work the way I think it does.

[eveporcello]

Not a dumb question!

If you go to ws://localhost.., you won’t see anything. If you want to test subscriptions, you should go to http://localhost:4000/playground. Then you’ll run a subscription in one tab and you’ll run a mutation in another tab and you can flip back to the subscription and see the changes.

Let me know how that goes!

[bmackio]

Ah, thanks.

So, would the purpose of pointing to that address be to say, the browser uses this address for websockets, but it doesn't work as http does in the address bar because it's not publicly exposed?

[eveporcello]

Yes exactly! 😀

…

On Oct 30, 2018, at 8:58 AM, brianebill ***@***.***> wrote: Ah, thanks. So, would the purpose of pointing to that address be to say, the browser uses this address for websockets, but it doesn't work as http does in the address bar because it's not publicly exposed? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[bmackio]

@eveporcello thanks for the clarifications :) Good luck on the workshops.