Queries & Fields — GraphQL

Queries & Fields Query adalah cara membaca data di GraphQL. Kamu minta exact fields yang dibutuhkan — server mengembalikan JSON dengan shape yang sama. Basic Qu

Queries & Fields

Query adalah cara membaca data di GraphQL. Kamu minta exact fields yang dibutuhkan — server mengembalikan JSON dengan shape yang sama.

Basic Query

# Query
query {
  user(id: "123") {
    name
    email
  }
}

# Response
{
  "data": {
    "user": {
      "name": "Budi",
      "email": "[email protected]"
    }
  }
}

Nested Fields

query {
  user(id: "123") {
    name
    posts {
      title
      comments {
        text
        author {
          name
        }
      }
    }
  }
}
# Satu request, dapat user + posts + comments + comment authors

Arguments

query {
  # Arguments pada field
  users(limit: 10, offset: 0, role: ADMIN) {
    name
    email
  }

  # Arguments pada nested field
  user(id: "123") {
    posts(orderBy: "createdAt", direction: DESC) {
      title
    }
  }
}

Aliases

# Query field yang sama dengan argument berbeda
query {
  admin: user(id: "1") {
    name
  }
  editor: user(id: "2") {
    name
  }
}

# Response
{
  "data": {
    "admin": { "name": "Admin User" },
    "editor": { "name": "Editor User" }
  }
}

Di Frontend (fetch)

const response = await fetch("/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    query: `
      query GetUser($id: ID!) {
        user(id: $id) {
          name
          email
        }
      }
    `,
    variables: { id: "123" },
  }),
});

const { data } = await response.json();

Yang akan kamu pelajari