Discussion: New features/UX changes for playground in addition to it's existing features?

[acao]

• What new features are most in demand for the playground preset?
• What feature requests can we cross reference from the soon to be retired prisma-labs/graphql-playground repo?
• how can we channel some of this into graphiql plugin proposals that can be used by other presets?

[penx]

What new features are most in demand for the playground preset?

An 'http headers' tab, as per discussion on #59 🙏 (perhaps not a 'new' feature as you say it should be possible already?)

[acao]

hey @penx! that feature already exists in playground, so it's already implicitly part of the new preset, and will be available as a plugin for other presets.

I'm specifically asking for new features that graphql-playground itself does not already have that can be added to the playground specific preset spec, on behalf of the new team. So I'm looking for feature request issues from prisma-labs/graphql-playground repo that can act as candidates to migrate over.

[acao]

regarding that feature, we hope to have a whole network sidebar with per-project default headers, verbs per operation type, other settings, in addition to the headers tab as a standalone plugin. because HTTP is not a requirement for GraphiQL, in 0.x or 1.x, it won't be part of core but all via closely maintained official plugins. the headers tab specifically will be maintained by the proposed playground preset crew referenced above!

https://github.com/graphql/graphiql/projects/10#card-30636148 here's the card I have for this plugin, hope to convert it to an issue soon once the plugin API is more in progress (still re-architecting state management as a precursor for this project https://github.com/graphql/graphiql/projects/4) :)

for more information, here's this meta-issue for plugins API that I'm gonna keep adding to:
#983

[iquabius]

Export/Import operations as collections: graphql/graphql-playground#6.

This is so useful for collaborating with team members and for working on different machines.

[acao]

nice! we were planning on introducing a plugin for importing queries as a collection early on, in beta or the first few major versions.

[1busby]

I think the ability to click on a Query or Mutation from the docs and automatically populate the CodeMirror edit with a sample query would be nice.

If another team at an organization that isn't using GraphQL wants to view the data, they wouldn't need to look up the syntax to get started :)

[codeStryke]

Currently I'm facing a problem with graphql-playground-react w.r.t updating the auth token (expires every 2hrs). There isn't a clean way to programmatically do that for all tabs (existing and future). Is this something that would qualify as a new feature request?

Another feature I can think of is the ability to send someone a link (URL) that would populate a new tab on their browser with the query and variables. A way to share without using an external service like graphqlbin. The drawback is that it would be restricted by the max length supported for a URL, but is useful for all cases that don't hit that limit.

[acao]

awesome point with both of these. the first is an interesting consideration, i've heard a few state management tools out there are supposed to persist state across tabs. it's possible using service workers and I think even recoil supports it? I can research

re: the shareable URL, that's a very often requested feature. we do that in the default graphiql demo to some degree. there are some nice utilities for automatically removing unnecessary whitespace, which might be more performant when clicking a share/copy link button than updating the url on every state change like we do in the graphiql demo. we have a PR to merge support for query paramaters into 2.0.0 core, possibly extensible by plugins even. this would also be handy for interactive documentation

[codeStryke]

In my comment I meant the tabs within graphql-playground as opposed to browser tabs. From what I saw, graphql-playground saves the header information per tab (I think it's called a session). There isn't an easy way to update the auth token in the header for all the sessions. It would be nice to have an interface to do that.

One approach could be to expose the store outside the app so it's possible to dispatch actions to it from the integration point. It would also need there to be an action that would take care of handling the update for all sessions.

[acao]

oh yes this is definately planned. one of the default sidebar plugins will be a "network" tab, where you can define global headers, methods, etc

[acao]

graphiql has a way of doing that programatically, where you can programatically define the default headers to be added to each request using the custom fetcher prop

[codeStryke]

Yes, I'm using that with graphiql currently. I'm hosting graphiql inside an iframe in our web app which is built using a framework like polymer. The app provides the header and also manages renewing the auth token every 2 hrs. I provide graphiql a fetcher which contains the auth headers. When the fetcher is updated in the app, inside the iframe I can call

ReactDOM.render(
  React.createElement(GraphiQL, {
    fetcher,
    ...
  }, null),
  document.getElementById('graphiql'),
);

and update graphiql. Currently my first and subsequent renders are the same .

If graphiql returned a ref then after initial render, I can hold on to the ref to pass is updated props.

[Shivam010]

I think the ability to suggest the saved endpoints in the first screen, where we are asked to enter the GraphQL's HTTP endpoint. This should not be a problem as the playground is already saving the workspace data against the used HTTP endpoint.

[dellwatson]

do we have feature to store temporarily as well instead of ctrl z all the time? so I have btter review between different query perhaps in split viewer as well?

[acao]

query history stores the queries currently, on each execution. top left