Document query string feature

[lorensr]

From #578, I understand that it's possible to add a query string, something like this:

http://api.foo.com/playground?query={me{name}}

However, this is the incorrect format. Could the format be added to the README?

This issue pertains to the following package(s):

• GraphQL Playground
• GraphQL Playground Express Middleware

[jvnlwn]

This is a bit late, and this repository appears to be no longer maintained (#1143), but as we use apollo-server-express which currently uses this GraphQL Playground under the hood, I wanted to know if this was possible, and more so, if variables, headers, etc. could be provided via the url.

You can simply supply the query and endpoint as query params, but If you want to handle variables, headers, etc., you need to use the tabs query parameter, which can handle the following options based on the Tab interface:

endpoint
query
name
variables
responses
headers

The following is an example using all tab options:

const baseUrl = `https://api.foo.com/playground`

// tabs must be an array
const tabsData = [
  {
    // tab url
    endpoint: baseUrl,
    // tab name
    name: "User",
    // tab variables, NOTE: variables are unique in that they must be passed to the VariableEditor as a String, hence JSON.stringify
    variables: JSON.stringify({ id: 1 }),
    // tab headers
    headers: { authorization: `Bearer 123` },
    // tab query
    query: `
      query UserQuery($id: Int!) {
        user(id: $id) {
          id
        }
      }
    `,
    // tab responses
    responses: [
      `
        {
          "data": {
            "user": {
              "id": 1
            }
          }
        }
      `,
    ],
  },
]

// create tabsQueryParam
const tabsQueryParam = new URLSearchParams({
  tabs: JSON.stringify(tabsData),
}).toString()

// concat with baseUrl
const url = `${baseUrl}?${tabsQueryParam}`

// output:
// https://api.foo.com/playground?tabs=%5B%7B%22endpoint%22%3A%22https%3A%2F%2Fapi.foo.com%2Fplayground%22%2C%22name%22%3A%22User%22%2C%22variables%22%3A%22%7B%5C%22id%5C%22%3A1%7D%22%2C%22headers%22%3A%7B%22authorization%22%3A%22Bearer+123%22%7D%2C%22query%22%3A%22%5Cn++++++query+UserQuery%28%24id%3A+Int%21%29+%7B%5Cn++++++++user%28id%3A+%24id%29+%7B%5Cn++++++++++id%5Cn++++++++%7D%5Cn++++++%7D%5Cn++++%22%2C%22responses%22%3A%5B%22%5Cn++++++%7B%5Cn++++++++%5C%22data%5C%22%3A+%7B%5Cn++++++++++%5C%22user%5C%22%3A+%7B%5Cn++++++++++++%5C%22id%5C%22%3A+1%5Cn++++++++++%7D%5Cn++++++++%7D%5Cn++++++%7D%5Cn++++%22%5D%7D%5D

Hope that helps someone.

[mcMickJuice]

@jvnlwn This is exactly what I was looking for over the past two days. Thank you very much