https://www.prisma.io/ logo
Join SlackCommunities
Powered by
Hi all — not strictly a graphcool question, but ha...
# prisma-whats-new
v
Hi all — not strictly a graphcool question, but has anyone tried to add graphql-playground to their own node-based graphql server?
a
Yes
v
Hey @agartha
a
Yes?
v
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:
Copy code
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
Can you share how you configured the playground in express?
v
All I did was this
Copy code
import { default as expressPlayground } from 'graphql-playground-middleware-express'
then somewhere else
Copy code
app.use('/graphql/playground', expressPlayground({ 
  endpointUrl: '/graphql',  
}));
a
I have only used it with a separate route. Can you try that?
app.use('/playground', expressPlayground(...)
v
ha, yes, I tried that already
same
a
Which version of g-p-m-e?
v
hold on, not exactly the same
it gives this other error (Without crashing)
Copy code
Unexpected token < in JSON at position 1
(in the right hand side of the playground)
a
In debug mode, you should see an error in your console
app.use('/playground', expressPlayground({ endpointUrl: '/graphql',  }));
You used that now?
v
yes, that
the app is running in debug mode
I’ll have to come back
Copy code
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
Can you see a related error in the console?
v
not in this instance 😕
a
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
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
Authorization header issue?
Can you run queries?
v
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
Is the playground app.use after the graphql one?
v
before
a
Can you switch that?
v
can try
a
I am upgrading my example to the latest playground version to see if it still works
v
nothing changed
still
Copy code
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
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
yeah; I can’t see a difference apart from yours being TS
a
That wouldn't matter
And you can query your endpoint using curl? (Just to be 100% sure)?
v
I can
a
😞
v
odd, isn’t it
a
It is.
v
btw, I am new to all this (being doing node for like 3 days), but this seems odd:
Copy code
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
Check out the file I sent, I don't think I do that
v
you don’t
you do this
Copy code
import expressPlayground from ‘graphql-playground-middleware-express’
a
Ah right
You beat me to it 😄
v
that doesn’t work for me
a
Ah no because of JS
v
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
Well, if you can share your full file, maybe I notice something.
v
proving more difficult than anticipated
No harm, I think
let me see
a
DM
v
sure
DM’d
3 Views
Open in Slack
PreviousNext
Powered by