Comments (10)
I'll take a look and get back to you - thanks.
from learning-graphql.
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!
from learning-graphql.
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.
from learning-graphql.
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.
from learning-graphql.
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.
from learning-graphql.
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.
from learning-graphql.
@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.
from learning-graphql.
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?
from learning-graphql.
from learning-graphql.
@eveporcello thanks for the clarifications :) Good luck on the workshops.
from learning-graphql.
Related Issues (18)
- GraphQL Playground links not working HOT 3
- [ts] Type 'string' is not assignable to type 'DocumentNode | DocumentNode[]'. HOT 3
- Java HOT 1
- Subscriptions not working in /playground
- Chapter 6: Apollo Client with React and Caching -> why use restore instead of await persistCache? HOT 2
- Chapter 3. Not working URL for union types HOT 1
- Chapter 3. Not working URL for interfaces HOT 1
- Use optional chaining in chapter 6
- 'githubAuthMutation' is not defined no-undef
- Broken Links HOT 4
- GitHub authentication is completely broken HOT 2
- [Chapter 3] CodeSandbox links are broken
- Chapter 5 configuring an express server
- [chapter 5] fix User inPhotos logic
- User postedPhotos connection bug
- Lock Down Package Versions
- Complete all Readme.md documents
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from learning-graphql.