GraphQL로 완벽한 React 애플리케이션 구축

GraphQL 쿼리 몇 개를 작성하면 기능이 완비된 React 응용 프로그램을 구축할 수 있다고 상상해 봅시다.TODO 응용 프로그램의 경우 사용자가 로그인, 게시, 검색, 업데이트 및 작업을 완료할 수 있습니다.이 글에서 나는 어떻게 WunderGraph를 이용하여 이러한 목표를 실현하는지, 그리고 그 의미가 무엇인지 설명할 것이다.

무엇이 신동입니까?
우리가 깊이 연구하기 전에, 장면을 전면적으로 이해하기 위해, WunderGraph가 무엇인지 빠르게 개술합시다.
WunderGraph는 GraphQL 엔진으로 서버에서 조회를 컴파일하여 영구적인 작업으로 공개한 다음 스마트 클라이언트를 생성하여 사용하도록 합니다.
GraphQL은 동적 특성을 잃지 않지만, 이런 방법은 GraphQL의 사용을 더욱 안전하고 효율적으로 한다.
또한 기본적으로 검색과 돌연변이가 서버에서 지속되기 때문에 현재 작업에서 유일하게 명령을 사용할 수 있습니다.
다음은 몇 가지 샘플 질의입니다.

query AllTasks($email: String! @fromClaim(name: "email")) {
  queryTask(filter: {email: {eq: $email}}){
    id
    title
    completed
  }
}

mutation AddTask($title: String!, $email: String! @fromClaim(name: "email")) {
  addTask(input: [{title: $title, completed: false, email: $email }]){
    task {
      id
      title
      completed
    }
  }
}

mutation SetTaskCompleted($id: ID!, $completed: Boolean! $email: String! @fromClaim(name: "email")){
  updateTask(input: {filter: {id: [$id], email: {eq: $email}} set: {completed: $completed} }){
    task {
      id
      title
      completed
    }
  }
}

위에서 설명한 바와 같이 우리는 세 가지 업무를 가지고 있다.
AllTasks - 사용자의 전자 메일 주소에 따라 사용자의 모든 작업을 나열합니다.
AddTask - 사용자에 대한 작업 추가
SetTaskCompleted - 작업을 완료됨으로 표시
이러한 세 가지 작업은 모두 매우 표준적이며 단 하나의 경미한 예외만 있을 뿐 사용자 정의 명령이 포함되어 있습니다.@fromClaim(name: "email") . 이 명령은 변수 $email이 항상 JWT 선언에서email .
WunderGraph의 개념에 익숙하지 않다면, 이것은 서버(WunderGraph 컨트롤러)만 정의하고 오래 지속할 수 있기 때문에 절대적으로 안전합니다.
이것은 사용자가 로그인을 해야만 이 조회와 상호작용을 할 수 있고, 로그인한 사용자만이 자신의 작업을 만들고, 열거하거나, 업데이트할 수 있다는 것을 의미한다.
다음에, 우리는 wundergen (우리의 코드 생성기) 을 사용하여 OpenID 클라이언트를 생성하는데, 이 클라이언트는 우리의 백엔드와 미리 설정되어 있다
GraphQL 모드의 유형 정의 및 각 작업에 대한 React 갈고리
이 과정은 매우 간단합니다. 왜냐하면 모든 설정을 가져와 템플릿을 통해 실행하기만 하면 됩니다.이제 TODO API를 다른 함수로 호출하는 것처럼 사용할 수 있습니다.

왜 우리는 전체 장소를 세울 수 없습니까?
현재 이것은 단지 하나의 개념일 뿐이기 때문에 실시하기 전에 먼저 당신들의 피드백을 듣고 싶습니다.한잔 하래요.
우리가 이 점을 어떻게 실현할 수 있는지에 대한 몇 가지 생각을 봅시다.앞서 말씀드렸듯이 GraphQL 작업만 작성할 예정입니다.
다시 한 번 살펴보겠습니다.

query AllTasks($email: String! @fromClaim(name: "email"))
    @ui(page: "/tasks", component: TABLE)
{
  queryTask(filter: {email: {eq: $email}}){
    ... @ui(linkTo: "/tasks/:id") {
        id @ui(columnName: "ID")
        title @ui(columnName: "Title")
        completed @ui(columnName: "Completed")
    }
  }
}

AllTasks 조회는 /tasks 루트에서 테이블 구성 요소를 생성합니다.
열에는 제목이 있고 각 열은 작업 세부내용 /tasks/:id페이지에 링크됩니다.

mutation AddTask(
    $title: String! @ui(formType: TEXT, formName: "Title"),
    $email: String! @fromClaim(name: "email")
)
    @ui(page: "/tasks/new", component: FORM)
{
  addTask(input: [{title: $title, completed: false, email: $email }]){
    task {
      id
      title
      completed
    }
  }
}

AddTask 돌변은 /tasks/new 노선에서 표를 생성합니다.
변수 $title은 표에서 기입합니다.

mutation SetTaskCompleted(
    $id: ID!,
    $completed: Boolean! @ui(formType: SWITCH, formName: "Completed"),
    $email: String! @fromClaim(name: "email")
)
    @ui(page: "/tasks/:id", component: FLAT_VIEW)
{
  updateTask(input: {filter: {id: [$id], email: {eq: $email}} set: {completed: $completed} }){
    task {
      id
      title
      completed
    }
  }
}

SetTaskCompleted 돌연변이는 /tasks/:id 페이지에 스위치를 표시하여 작업 상태를 업데이트합니다.

우리 이해득실을 토론합시다
우선, 이것은 효과적인 GraphQL 문법이다.하지만 조작은 곧 복잡해질 수 있다.
우리가 이 방면에서 얻을 수 있는 성과는 틀림없이 유한한 것이다.그러나 일부 용례에서 맞춤형 제작은 개발 원가만큼 중요하지 않다.
WunderGraph는 가능한 모든 데이터 원본을 연결할 수 있습니다. (적어도 이것은 구상입니다.) 따라서, 기존 API에 계기판이나 관리 패널, 심지어 간단한 연락처 페이지를 구축하려면, 이것은 코드 없이 실현할 수 있는 매우 편리한 방법일 수 있습니다.
빠른 원형은 매우 설득력 있는 용례가 있을 수 있다.고려 프로세스: CRUD GraphQL 백엔드를 배치하고 일련의 조작을 작성하면 응용 프로그램을 배치할 수 있습니다.그것은 얼마나 빠를 수 있습니까?그리고 필요에 따라 비계 보기와 폼을 맞춤형으로 만들 수 있습니다.
아마도 페이지 사이에 내비게이션을 직접 도입하려는 생각은 너무 지나친 것 같다.아마도 우리는 조작에 따라 구성 요소를 생성하여 사용자가 수동으로 내비게이션을 정의할 수 있도록 할 수 있습니까?
그러나 조작을 변경한 후 코드를 다시 생성할 때 어떻게 중단 없이 미리 생성된 구성 요소를 맞춤형으로 만들 수 있습니까?
여러 템플릿이 유용한지 여부는 재료 UI 또는 부트 중에서 선택할 수 있도록 합니다..이게 의미가 있나요?

당신은 어떻게 생각합니까?
마지막으로 나는 이것이 아직 실시할 준비가 되지 않았다고 생각한다.나는 너의 피드백이 필요하다. 이런 방법이 너에게 유용한지 좀 보자.당신은 이것을 어떻게 사용하는지에 대해 어떤 생각을 가지고 있습니까?당신을 위해 봉사할 물건이 있습니까?
Discord, GitHub으로 전화 주세요.
또는 평론에서 당신의 의견을 공유해야만 우리가 정확한 결정을 내릴 수 있습니다.

계산하고 싶으세요?
우리는 현재 공개 측정 중이다.https://wundergraph.com으로 가보세요.