Title
v
Vinnie
12/02/2017, 9:49 AMHi all — not strictly a graphcool question, but has anyone tried to add graphql-playground to their own node-based graphql server?
a
agartha
12/02/2017, 11:29 AMYes
v
Vinnie
12/02/2017, 1:19 PMHey @agartha
a
agartha
12/02/2017, 1:25 PMYes?
v
Vinnie
12/02/2017, 6:40 PMGot sidetracked my children
👶🏻 2
So, Node + Apollo + Express
I’ve added playground as middleware for express
When I go the first time to the playground URL that I set for my app, I get this:
events.js:183
throw er; // Unhandled 'error' event
^
Error: write after end
at write_ (_http_outgoing.js:625:15)
at ServerResponse.write (_http_outgoing.js:620:10)
at /Users/vincenzo/Documents/Repositories/github/zoo/panda/node_modules/apollo-server-express/src/expressApollo.ts:50:11
at <anonymous>
at process._tickDomainCallback (internal/process/next_tick.js:228:7)a
agartha
12/02/2017, 7:02 PMCan you share how you configured the playground in express?
v
Vinnie
12/02/2017, 7:04 PMAll I did was this
import { default as expressPlayground } from 'graphql-playground-middleware-express'app.use('/graphql/playground', expressPlayground({
endpointUrl: '/graphql',
}));a
agartha
12/02/2017, 7:04 PMI have only used it with a separate route. Can you try that?
app.use('/playground', expressPlayground(...)v
Vinnie
12/02/2017, 7:05 PMha, yes, I tried that already
same
a
agartha
12/02/2017, 7:05 PMWhich version of g-p-m-e?
v
Vinnie
12/02/2017, 7:06 PMhold on, not exactly the same
it gives this other error (Without crashing)
Unexpected token < in JSON at position 1(in the right hand side of the playground)
a
agartha
12/02/2017, 7:06 PMIn debug mode, you should see an error in your console
app.use('/playground', expressPlayground({ endpointUrl: '/graphql', }));You used that now?
v
Vinnie
12/02/2017, 7:07 PMyes, that
the app is running in debug mode
I’ll have to come back
SyntaxError: Unexpected token < in JSON at position 0
at <http://cdn.jsdelivr.net/npm/graphql-playground@1.3.1/build/static/js/middleware.js:1:978882>
at <anonymous>a
agartha
12/02/2017, 11:23 PMCan you see a related error in the console?
v
Vinnie
12/02/2017, 11:24 PMnot in this instance 😕
a
agartha
12/02/2017, 11:24 PMThat's weird. I had that error a lot, but that was always related to an error with my graphql endpoint, not the playground
Is your endpoint path correct for the graphql endpoint?
v
Vinnie
12/02/2017, 11:25 PMI have classic graphiql installed too, that’s working fine, the endpoint itself has nothing wrong
(and yes they are both pointing to the same place, so the endpoint path is correct)
a
agartha
12/02/2017, 11:27 PMAuthorization header issue?
Can you run queries?
v
Vinnie
12/02/2017, 11:28 PMI can’t run anything, but because everything gives me that syntax error
this is with having /playground rather than /graphql/playground as I used to before
with the latter, the playground crashes the app on the first load, but then is able to run queries once the app is reloaded
a
agartha
12/02/2017, 11:29 PMIs the playground app.use after the graphql one?
v
Vinnie
12/02/2017, 11:30 PMbefore
a
agartha
12/02/2017, 11:31 PMCan you switch that?
v
Vinnie
12/02/2017, 11:31 PMcan try
a
agartha
12/02/2017, 11:31 PMI am upgrading my example to the latest playground version to see if it still works
v
Vinnie
12/02/2017, 11:32 PMnothing changed
still
SyntaxError: Unexpected token < in JSON at position 1
at <http://cdn.jsdelivr.net/npm/graphql-playground@1.3.1/build/static/js/middleware.js:1:978882>
at <anonymous>thanks for your help, btw, I appreciate
a
agartha
12/02/2017, 11:33 PMOkay, I upgraded my example from 1.1.4 to 1.3.1.
And it's still working
This is my server file: https://github.com/qewl/qewl-airbnb-example/blob/master/src/server.ts
And this is the working playground:
https://snag.gy/5FYdHQ.jpg▾
Hopefully you can find what's different...
v
Vinnie
12/02/2017, 11:36 PMyeah; I can’t see a difference apart from yours being TS
a
agartha
12/02/2017, 11:37 PMThat wouldn't matter
And you can query your endpoint using curl? (Just to be 100% sure)?
v
Vinnie
12/02/2017, 11:56 PMI can
a
agartha
12/02/2017, 11:56 PM😞
v
Vinnie
12/02/2017, 11:56 PModd, isn’t it
a
agartha
12/02/2017, 11:57 PMIt is.
v
Vinnie
12/02/2017, 11:58 PMbtw, I am new to all this (being doing node for like 3 days), but this seems odd:
import { default as expressPlayground } from 'graphql-playground-middleware-express'import { express as expressPlayground}a
agartha
12/02/2017, 11:59 PMCheck out the file I sent, I don't think I do that
v
Vinnie
12/02/2017, 11:59 PMyou don’t
you do this
import expressPlayground from ‘graphql-playground-middleware-express’a
agartha
12/02/2017, 11:59 PMAh right
You beat me to it 😄
v
Vinnie
12/02/2017, 11:59 PMthat doesn’t work for me
a
agartha
12/03/2017, 12:00 AMAh no because of JS
v
Vinnie
12/03/2017, 12:00 AMthought something like that
I am working on a project already started by others and trying to replaced graphiql + voyager with playground
just so to start getting familiar with things
a
agartha
12/03/2017, 12:01 AMWell, if you can share your full file, maybe I notice something.
v
Vinnie
12/03/2017, 12:01 AMproving more difficult than anticipated
No harm, I think
let me see
a
agartha
12/03/2017, 12:01 AMDM
v
Vinnie
12/03/2017, 12:02 AMsure
DM’d