Playground file structure

.ocelotplayground 📦

The main files you work with are called Playgrounds. A Playground is a package file, which basically means that it is a folder presented as if it were a single file. This has the benefit that we can deliver both contents and config in one, human-readable, bundle. In detail this will look as follows:

Example.ocelotplayground
contents.graphql	settings.json

contents.graphql 📄

This file is a normal GraphQL file which can easily be used outside the containing Playground. It contains the actual contents the user enters within the editor.

settings.json 📄

As its name suggests this file is used to store all Playground settings. The following snippet shows the default settings.json.

{
  "endpoint": null,
  "public_headers": {
    "Accept": "application/json",
    "Content-Type": "application/json"
  },
  "secret_headers": {}
}

Public vs. secret headers

Because we want to keep security in mind we differentiate between public and secret headers. The values of public headers will directly be stored as plain-text inside the file. Values of secret headers, on the other hand, are safely stored in the iOS keychain. Instead of storing the secret values we generate a UUID inside the file that links the keychain entry.

GitHub example

{
  "endpoint": "https://api.github.com/graphql",
  "public_headers": {
    "Accept": "application/json",
    "Content-Type": "application/json"
  },
  "secret_headers": {
    "Authorization": "d5863bd8-b350-4240-9b12-9f8490c18bd6"
  }
}

In this example, GitHub requires an authorization token. As we don't want to store the token as plain-text inside the config file, we generate a UUID on Playground creation as a placeholder. Now, every time the Playground is opened, we'll search the Keychain for a corresponding token and use this as value for the authorization header.