Bring back playground, no sandbox

[ramiel]

I don't understand why we should use a tool hosted on your servers. I'd like to have back playground or any solution that can run on my server or on my local setup. I don't want my data to be in any way served through your domain.
Also, having a remote sandbox is a problem when I need to use cookie in a local environment because I'm not free anymore to run a local environment on normal "http" because you can only support Secure cookies.

[glasser]

Hi @ramiel! While GraphQL Playground will no longer be enabled by default in Apollo Server 3, it’s straightforward to continue using it in your app! (We have not yet written a full 2->3 migration guide but it’s what we’re working on right now.)

 import { ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core';
 
 new ApolloServer({ plugins: [ ApolloServerPluginLandingPageGraphQLPlayground() ] });

We’ve even made some improvements to the integration in AS3; for example, Playground now defaults to using the current URL as its GraphQL endpoint which means that in a bunch of circumstances where you had to explicitly configure the endpoint, you no longer have to.

When we started working on Apollo Server 3, we realized that having GraphQL Playground as the only built-in UI was problematic since it’s been officially retired since last April. The upgrade from Apollo Server 1 to Apollo Server 2 was a 100% switch from GraphiQL to GraphQL Playground, which in retrospect was too extreme of a transition. We didn’t want to leave a retired project front and center in AS3 (literally part of the new ApolloServer constructor), but we also wanted to have more options than just “we’re using something else now”. At the time the intended boost to GraphiQL’s development hadn’t yet really kicked off, though it seems to be making progress now!

So instead of tying Apollo Server to a single retired project (or even a single hopefully revived project) we’ve abstracted out the easy ability to add a landing page to your server in a cross-web-framework way. I hope the GraphiQL developers add an AS-compatible landing page plugin in their repo as well! That might be a reasonable choice for a default in a future Apollo Server major release; as of right now, Explorer/Sandbox seems to be the most actively maintained web-based GraphQL interface, so we think it’s the best fit for AS’s default landing page.

We built Explorer (which is part of Sandbox) because we think it’s a great way to interact with your GraphQL server, but if you’d prefer to serve another tool’s UI from your server (whether because you prefer the user experience of the tool or because you’d like to avoid exposing your server to a hosted service at all), we’ve made sure that’s easy as well. (Though note that while Sandbox is hosted under Apollo's domain and loads its source from there, we intend for all of your API data to remain strictly in your browser without being sent to our servers.)

I’ll pass on your note re Secure cookies to the Sandbox team!

[ramiel]

Thanks for the answer, it's perfect.
Unless developers have any reason not to use sandbox, it is indeed a valid alternative, given that the problem about cookies is solve because forcing application to run on https in local dev maybe hard sometimes.

[sarink]

If the playground was retired in favor of graphiql, how can you use graphiql with apollo-server v3 ? Is there a middleware or plugin or something somewhere? I can't seem to find one.

[glasser]

We didn't build a plugin to serve graphiql as a landing page, but the GraphiQL team or anyone else motivated can do that! It would be a pretty small package implementing the renderLandingPage API. I think it would be easier for somebody who maintains or at least uses GraphiQL to keep such a plugin up to date.

[jorgegarba]

By the moment, the solution could be the following:
Forget Mongo Stuff

const mongoose = require('mongoose')
const { ApolloServer } = require('apollo-server')
const typeDefs = require('./gql/schema')
const resolvers = require('./gql/resolvers')

const { ApolloServerPluginLandingPageGraphQLPlayground } = require('apollo-server-core')


const conectionString = process.env.BD
mongoose.connect(conectionString, {}, (err, _) => {
    if (err) {
        console.log('Connection error ', err)
    } else {
        console.log('Success')
        server()
    }
})

function server() {
    const serverApollo = new ApolloServer({
        typeDefs: typeDefs,
        resolvers: resolvers,
        plugins: [ApolloServerPluginLandingPageGraphQLPlayground()] // this is the most important thing
    })
    serverApollo.listen().then(({ url }) => {
        console.log(`Playground on: ${url}`)
    })
}

[joshft91]

@jorgegarba - The solution you wrote out above is still documented here: https://www.apollographql.com/docs/apollo-server/api/plugin/landing-pages/#graphql-playground-landing-page

I think most people that come across this, including @sarink, are wondering how we can use the new/merged GraphiQL IDE with Apollo Server 3. From what I can tell, there's no good way to do that yet.

[glasser]

@joshft91 I agree that using GraphiQL easily with Apollo Server would be great! One of the main lessons this team has learned over the past few years is that it's better for us to provide documented stable APIs for integrating with other projects instead of maintaining those integration points as part of the core repository here. It lets us focus more on improving the project itself and less on staying on the treadmill of updates to a large number of other projects. I'd love to see our friends on the GraphiQL team (who we recently worked closely with on fixing a cross-project XSS vulnerability) write a landing page plugin or for a community member to do that independently!

[joshft91]

@glasser I appreciate the response! I definitely agree with you on all fronts regarding the approach you guys took with 3rd party integrations.

The most confusing part, at least for myself, comes from the fact that on the build and run queries documentation it says that Playground is being retired in favor of GraphiQL which would lead me to think that if Playground is being retired, then there must be some way to run GraphiQL instead -- which it appears that there isn't (yet).

It would have saved me fair amount of time if the documentation had said something along the lines of what you mentioned above so I would at least know that GraphiQL isn't natively shipped with Apollo Server.

[glasser]

@joshft91 Thanks, simplifying the text in #5913

[geekmdtravis]

I'd like to also support the idea of having a GraphiQL plugin since Playground is retired. There are cases where a development computer may have outgoing requests on a whitelist so being redirected to a server which hooks into my GraphQL endpoint is not possible due to IT security policy. I'm dealing with this now. I know I can use Playground (and probably will), but retired leaves me feeling like the code should be considered insecure.