할 일 앱 백엔드 템플릿
GraphQL — 스키마, API 및 AI 가이드

주요 요점

개요

Todo 앱은 백엔드 개발 학습을 위한 가장 일반적인 시작점 중 하나입니다. 내부적으로 사용자 등록, 작업 CRUD, 소유 기반 접근 제어 및 선택적으로 실시간 동기화가 필요합니다.

아래 스키마는 _User (내장) 및 Todo라는 두 클래스를 정의하며, 이들은 포인터로 연결되어 있습니다. Back4app GraphQL SDK를 사용하면 앱에서 이 백엔드와 상호작용할 수 있습니다 — 객체를 쿼리하고, 생성하고, 업데이트하고, 삭제하는 작업을 사용자 정의 API 레이어를 작성하지 않고도 수행할 수 있습니다.

왜 Back4app으로 GraphQL 할 일 백엔드를 구축해야 할까요?

Back4app은 준비된 백엔드와 타입이 지정된 SDK를 제공하므로 REST 연결 코드를 작성하거나 인증을 직접 관리하지 않고도 할 일 앱을 구축할 수 있습니다.

• •SDK 및 타입 안전성: SDK는 Todo와 User를 타입 안전하게 유지하고 JSON을 처리하므로 보일러플레이트 코드를 덜 작성할 수 있습니다.
• •비동기 및 선택적 오프라인: async/await를 사용하세요; 지원되는 SDK는 로컬 핀닝을 제공하므로 목록이 오프라인에서도 작동하고 온라인으로 돌아올 때 동기화됩니다.
• •Live Queries: Todo 변경 사항을 구독하여 UI가 WebSockets를 통해 실시간으로 업데이트됩니다.

모든 스택에 대해 동일한 스키마와 API — 백엔드를 변경하지 않고 클라이언트를 나중에 전환할 수 있습니다.

핵심 이점

더 빠르게 배포할 수 있는 프로덕션 준비 완료 Todo 백엔드로 앱에 집중할 수 있습니다.

기술 스택

이 Todo 앱 템플릿을 지원하는 모든 것.

ER 다이어그램

GraphQL 할 일 앱 데이터 모델에 대한 개체-관계 다이어그램입니다.

erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Todo {
        String objectId PK
        String title
        Boolean done
        Date dueDate
        Number priority
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    _User ||--o{ Todo : "owns"

통합 흐름

Auth-to-CRUD 시퀀스: 당신의 GraphQL 앱이 Back4app와 통신하는 방법 — 로그인 후, 할 일을 조회하고 생성합니다.

sequenceDiagram
  participant User
  participant Client as GraphQL Client
  participant Back4app as Back4app Cloud

  User->>Client: Login
  Client->>Back4app: mutation { logIn(username, password) }
  Back4app-->>Client: Session token
  Client-->>User: Logged in

  User->>Client: Load todos
  Client->>Back4app: query { todos { edges { node { objectId title done } } } }
  Back4app-->>Client: Todo list
  Client-->>User: Show list

  User->>Client: Create todo
  Client->>Back4app: mutation { createTodo(input: { ... }) }
  Back4app-->>Client: Todo (objectId)
  Client-->>User: Updated list

데이터 사전

스키마의 모든 클래스에 대한 필드 참조 완전 목록입니다.

보안 및 권한

이 스키마에서 소유권, ACL 및 클래스 수준 권한이 데이터를 보호하는 방법.

스키마 (JSON)

원시 JSON 스키마 정의 — Back4app 앱에서 복사하여 사용하거나 API를 통해 가져오세요.

{
  "classes": [
    {
      "className": "Todo",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "done": {
          "type": "Boolean",
          "required": false,
          "defaultValue": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "priority": {
          "type": "Number",
          "required": false,
          "defaultValue": 3
        },
        "owner": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

API 플레이그라운드

Todo 스키마에 대한 REST 및 GraphQL 엔드포인트를 사용해 보세요. 위의 예제 데이터에서 응답 — Back4app 계정이 필요하지 않습니다.

이 템플릿과 동일한 Todo 스키마를 사용합니다.

단계별 GraphQL 통합

GraphQL 앱에서 Back4app 백엔드에 연결하고 Back4app GraphQL SDK를 사용하세요.

1. usage.graphql.step1Title

   usage.graphql.step1Desc

   GraphQL

   복사

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   query GetTodos {
     todos {
       edges {
         node {
           objectId
           title
           done
           dueDate
           priority
           createdAt
         }
       }
     }
   }

2. usage.graphql.step2Title

   usage.graphql.step2Desc

   GraphQL

   복사

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   13

   14

   15

   16

   mutation CreateTodo($title: String!, $done: Boolean, $priority: Int) {
     createTodo(input: {
       fields: {
         title: $title
         done: $done
         priority: $priority
       }
     }) {
       todo {
         objectId
         title
         done
         createdAt
       }
     }
   }

3. usage.graphql.step3Title

   usage.graphql.step3Desc

   GraphQL

   복사

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   mutation UpdateTodo($objectId: ID!, $done: Boolean) {
     updateTodo(input: {
       objectId: $objectId
       fields: { done: $done }
     }) {
       todo { objectId done }
     }
   }
   
   mutation DeleteTodo($objectId: ID!) {
     deleteTodo(input: { objectId: $objectId }) { success }
   }

자주 묻는 질문

Todo 앱 백엔드 템플릿에 대한 일반적인 질문입니다.