import{_ as h}from"./graphql-playground (1)-C_SWrH2M.js";import{_ as p}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as r,a as e,b as a,d as i,e as t,f as l,r as d,o as k}from"./app-42vVvAb-.js";const o={};function g(u,s){const n=d("RouteLink");return k(),r("div",null,[s[8]||(s[8]=e('

GraphQL Playground

Attention: For using the GraphQL Playground set DEBUG=true in your backend .env, see .env.template!

To use GraphQL Playground, we need to know some basics:

First, we need to have a user from ocelot.social to log in as. The user can be created by seeding the Neo4j database from the backend or by multiple GraphQL mutations.

Seed The Neo4j Database

',7)),a("p",null,[s[1]||(s[1]=i("In your browser you can reach the GraphQL Playground under ")),s[2]||(s[2]=a("code",null,"http://localhost:4000/",-1)),s[3]||(s[3]=i(", if the database and the backend are running, see ")),t(n,{to:"/backend/"},{default:l(()=>s[0]||(s[0]=[i("backend")])),_:1}),s[4]||(s[4]=i(". There you will also find instructions on how to seed the database."))]),s[9]||(s[9]=e(`

Use GraphQL Mutations To Create A User

TODO: Describe how to create a user using GraphQL mutations!

You can register a user by sending the query:

mutation {
  login(email: "user@example.org", password: "1234")
}

Or use "moderator@example.org" or "admin@example.org" for the roll you need.

If all goes well, you will receive a QGL response like:

{
  "data": {
    "login": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU"
  }
}

You can use this response to set an HTTP header when you click HTTP HEADERS in the footer. Just set it with the login token you received in response:

{
  "Authorization": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU"
}

This token is used for all other queries and mutations you send to the backend.

Query And Mutate

When you are logged in and open a new playground tab by clicking "+", you can create a new group by sending the following mutation:

mutation {
  CreateGroup(
    # id: ""
    name: "My Group"
    # slug: ""
    about: "We will save the world"
    description: "<p class=\\"\\"><em>English:</em></p><p class=\\"\\">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class=\\"\\">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class=\\"\\">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class=\\"\\">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>"
    groupType: hidden
    actionRadius: interplanetary
    categoryIds: ["cat12"]
  ) {
    id
    name
    slug
    createdAt
    updatedAt
    disabled
    deleted
    about
    description
    groupType
    actionRadius
    myRole
  }
}

You will receive the answer:

{
  "data": {
    "CreateGroup": {
      "id": "2e3bbadb-804b-4ebc-a673-2d7c7f05e827",
      "name": "My Group",
      "slug": "my-group",
      "createdAt": "2022-09-01T09:44:47.969Z",
      "updatedAt": "2022-09-01T09:44:47.969Z",
      "disabled": false,
      "deleted": false,
      "about": "We will save the world",
      "description": "<p class=\\"\\"><em>English:</em></p><p class=\\"\\">This group is hidden.</p><h3>What is our group for?</h3><p>This group was created to allow investigative journalists to share and collaborate.</p><h3>How does it work?</h3><p>Here you can internally share posts and comments about them.</p><p><br></p><p><em>Deutsch:</em></p><p class=\\"\\">Diese Gruppe ist verborgen.</p><h3>Wofür ist unsere Gruppe?</h3><p class=\\"\\">Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.</p><h3>Wie funktioniert das?</h3><p class=\\"\\">Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.</p>",
      "groupType": "hidden",
      "actionRadius": "interplanetary",
      "myRole": "owner"
    }
  }
}

`,16)),a("p",null,[s[6]||(s[6]=i("If you look into the Neo4j database with your browser and search the groups, you will now also find your new group. For more details about our Neo4j database read ")),t(n,{to:"/neo4j/"},{default:l(()=>s[5]||(s[5]=[i("here")])),_:1}),s[7]||(s[7]=i("."))])])}const B=p(o,[["render",g],["__file","GraphQL-Playground.html.vue"]]),b=JSON.parse('{"path":"/backend/src/graphql/GraphQL-Playground.html","title":"GraphQL Playground","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"How To Login?","slug":"how-to-login","link":"#how-to-login","children":[{"level":3,"title":"Seed The Neo4j Database","slug":"seed-the-neo4j-database","link":"#seed-the-neo4j-database","children":[]},{"level":3,"title":"Use GraphQL Mutations To Create A User","slug":"use-graphql-mutations-to-create-a-user","link":"#use-graphql-mutations-to-create-a-user","children":[]},{"level":3,"title":"Login Via GraphQL","slug":"login-via-graphql","link":"#login-via-graphql","children":[]}]},{"level":2,"title":"Query And Mutate","slug":"query-and-mutate","link":"#query-and-mutate","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.94,"words":581},"filePathRelative":"backend/src/graphql/GraphQL-Playground.md","localizedDate":"July 17, 2025","excerpt":"\\n

GraphQL Playground

\\n

Attention: For using the GraphQL Playground set DEBUG=true in your backend .env, see .env.template!