Title
v

Vinnie

12/02/2017, 9:49 AM
Hi 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 AM
Yes
v

Vinnie

12/02/2017, 1:19 PM
Hey @agartha
a

agartha

12/02/2017, 1:25 PM
Yes?
v

Vinnie

12/02/2017, 6:40 PM
Got 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)
But the playground loads in the browser just fine, but gives me an error that says “failed to fetch”. Then i restart the app whilst the playground is still loaded in the browser, and when I go back to playground it is able to see the schema and run the queries just fine
a

agartha

12/02/2017, 7:02 PM
Can you share how you configured the playground in express?
v

Vinnie

12/02/2017, 7:04 PM
All I did was this
import { default as expressPlayground } from 'graphql-playground-middleware-express'
then somewhere else
app.use('/graphql/playground', expressPlayground({ 
  endpointUrl: '/graphql',  
}));
a

agartha

12/02/2017, 7:04 PM
I have only used it with a separate route. Can you try that?
app.use('/playground', expressPlayground(...)
v

Vinnie

12/02/2017, 7:05 PM
ha, yes, I tried that already
same
a

agartha

12/02/2017, 7:05 PM
Which version of g-p-m-e?
v

Vinnie

12/02/2017, 7:06 PM
hold 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 PM
In 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 PM
yes, 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 PM
Can you see a related error in the console?
v

Vinnie

12/02/2017, 11:24 PM
not in this instance 😕
a

agartha

12/02/2017, 11:24 PM
That'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 PM
I 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 PM
Authorization header issue?
Can you run queries?
v

Vinnie

12/02/2017, 11:28 PM
I 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 PM
Is the playground app.use after the graphql one?
v

Vinnie

12/02/2017, 11:30 PM
before
a

agartha

12/02/2017, 11:31 PM
Can you switch that?
v

Vinnie

12/02/2017, 11:31 PM
can try
a

agartha

12/02/2017, 11:31 PM
I am upgrading my example to the latest playground version to see if it still works
v

Vinnie

12/02/2017, 11:32 PM
nothing 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 PM
Okay, I upgraded my example from 1.1.4 to 1.3.1.
And it's still working
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 PM
yeah; I can’t see a difference apart from yours being TS
a

agartha

12/02/2017, 11:37 PM
That wouldn't matter
And you can query your endpoint using curl? (Just to be 100% sure)?
v

Vinnie

12/02/2017, 11:56 PM
I can
a

agartha

12/02/2017, 11:56 PM
😞
v

Vinnie

12/02/2017, 11:56 PM
odd, isn’t it
a

agartha

12/02/2017, 11:57 PM
It is.
v

Vinnie

12/02/2017, 11:58 PM
btw, 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'
All the examples I see they have things like in yours or like
import { express as expressPlayground}
But I had to do import default… is that fine?
a

agartha

12/02/2017, 11:59 PM
Check out the file I sent, I don't think I do that
v

Vinnie

12/02/2017, 11:59 PM
you don’t
you do this
import expressPlayground from ‘graphql-playground-middleware-express’
a

agartha

12/02/2017, 11:59 PM
Ah right
You beat me to it 😄
v

Vinnie

12/02/2017, 11:59 PM
that doesn’t work for me
a

agartha

12/03/2017, 12:00 AM
Ah no because of JS
v

Vinnie

12/03/2017, 12:00 AM
thought 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 AM
Well, if you can share your full file, maybe I notice something.
v

Vinnie

12/03/2017, 12:01 AM
proving more difficult than anticipated
No harm, I think
let me see
a

agartha

12/03/2017, 12:01 AM
DM
v

Vinnie

12/03/2017, 12:02 AM
sure
DM’d