Redwood: Programatically set the GraphiQL playground URL

Created on 30 Jul 2020  路  7Comments  路  Source: redwoodjs/redwood

Set the endpoint for GraphiQL based on off the settings in redwood.toml.

Example:

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: {
    endpoint: "/dev/graphql"
  }
});

Use getConfig() from @redwoodjs/internal to read the redwood.toml file.

bu2-confirmed good first issue hacktoberfest

All 7 comments

Could I be assigned this issue please?

Hey there @awey95;

I wanted to clarify the issue here. When you create a new redwood project and open the GraphQL playground:

yarn create redwood-app
yarn rw dev

Go to http://localhost:8910/.netlify/functions/graphql/
image

You'll notice that the address (in GraphiQL) is incorrect.

It should either be:
image

This approach is OK, but it has problems since this might not work if you access GraphiQL via http://localhsot:8911/graphql/

Or:
image

This approach has problems since CORS isn't available.

I wish we could just make GraphiQL use the address in the address bar.

I'm a bit confused. Could you explain to me the use case of this please?

Why would someone use a url other than localhost:8911/graphl to get access to the playground?
Why would someone have one url in the address bar and a different one in the GraphiQL playground?

Also, in redwood.toml how do you expect the new endpoint to be passed in?

Why would someone use a url other than localhost:8911/graphl to get access to the playground?

Vercel uses /api/* instead of /.netlify/functions/*. It's conceivable to me that people would want to use either address to access the GraphiQL playground.

It's none obvious when this isn't working properly. I know I've personally spent a bunch of time trying to figure out WTF is going on when this broke.

Why would someone have one url in the address bar and a different one in the GraphiQL playground?

I think it's because you might have a GraphQL server on one address, but the ability to explore it via GraphiQL on a completely different address. Apollo GraphQL server handles this internally, but I'm pretty confident that other GraphQL servers do not integrate a playground automatically.

Hmmm...

Why does setting the playground endpoint do nothing? You can pass any value in and when you rebuild, and start your RW app and head over to the playground, the endpoint value remains unchanged, as if you didn't configure it.

I decided to test the playground endpoint out on a new nodejs project. Installed and configured ApolloServer with a playground endpoint set to /dev/graphql and the changes are reflected. Not sure why that isn't the case with the redwood project.

There seems to be a bit of confusion around Apollo's GraphQL Playground and GraphiQL.
These are two completely different things, GraphQL Playground is included in Redwood, GraphiQL is not, currently, but I see references to it popping up in the RedwoodJS Community.

yes, I believe there are some historical reasons for this (things changed with what was provided) as well as the fact GraphQL Playground is built on top of GraphiQL (I believe).

Correct me otherwise, but I think it's safe to assume that currently, it's all GraphQL Playground _only_.

Was this page helpful?
0 / 5 - 0 ratings