GraphQL 쿼리 - 시작하기

GraphQL 쿼리

GraphQL을 시작하는 것은 새로운 구문을 배우고 백엔드 및 프런트엔드와의 통합을 시작하는 데 많은 노력을 기울이는 것처럼 보일 수 있지만 구문이 매우 쉽고 친숙하다는 것을 알게 되면 바로 시작하기만 하면 됩니다. GraphQL로 프로젝트

필드

필드는 쿼리에서 검색된 개별 데이터입니다. 필요한 필드로 쿼리를 구성하면 반환된 데이터의 구조가 입력과 동일한 구조를 따르므로 필드를 쉽게 매핑할 수 있습니다.

{
    user {
        name
        id
        dateofbirth
    }
}

Returns:

{
    "data": {
        "user": {
            "name": "Name 1",
            "id": "uniqueid124",
            "dateofbirth" : "23/10/1995"
        }
    }
}

특정 필드 가져오기

애플리케이션의 비즈니스 논리에 따라 변환되는 목록 또는 필드의 특정 데이터를 원하는 시나리오가 있을 것입니다. 운 좋게도 모든 필드에는 인수가 전달되어 백엔드에서 가져온 데이터를 단순화하고 프런트엔드에서 필터 논리를 가질 필요가 없습니다.

검색 필터가 있고 각 사용자 입력이 목록을 필터링하고 다시 보내는 서버에 백엔드 API 호출을 보내는 시나리오를 고려하십시오. 이제 검색 입력을 기반으로 GraphQL 쿼리를 보내고 UI에 목록을 더 쉽게 표시할 수 있습니다.

{
    allusers(name: "nam") {
        name
        dateofbirth
    }
}

Returns:
{
    "data": {
        "allusers": [{
            "name" : "name lastname",
            "dateofbirth": "23/03/1997"
        }. {
            "name" : "name middlename",
            "dateofbirth": "03/07/2003"
        }]
    }
}

파편

실제 애플리케이션을 구축할 때 애플리케이션 전체에서 유사한 데이터를 표시할 때 표준 패턴을 따르는 경향이 있습니다. GraphQL과 관련하여 DRY 패턴(Don't Repeat Yourself)을 따르는 데 도움이 되는 단편입니다.

블로그 사이트가 있고 애플리케이션에서 각 블로그를 카드로 표시하는 경우 동일한 패턴을 따를 수 있습니다.

{
    mostViewedBlog: blog(id: "1234") {
        ...blogFields
    }
    mostRecentBlog: blog(id: "43243") {
        ...blogFields
    }
    relatedBlog: blog(idL "323") {
        ...blogFields
    }
}

fragment blogFields on Blog {
  name
  description
  image_url
}

우리는 쿼리를 읽기 쉽게 만들었고 프래그먼트를 사용하여 쿼리에서 반복을 제거했습니다. 조각on 키워드를 선언할 때 조각을 사용할 필드를 정의합니다. 그런 다음 GraphQL은 오류를 방지하고 조각 필드가 있는지 확인하는 해당 필드에 해당 조각을 정의할 수 있습니다.

보너스: 예리한 관찰자는 왼쪽에 : 로 구분된 이름이 있는 마지막 쿼리를 알아차렸을 것입니다. 그것들은 별칭이며 이를 사용하여 필드 결과의 이름을 바꿀 수 있습니다.

Result:
{
    "data": {
        "mostViewedBlog" : {
            "name": "GraphQL Queries",
            "description" : "Description of GraphQL Queries",
            "image_url": "blogimage.png"
        },
        "mostRecentBlog" : {
            "name": "What is GraphQL",
            "description" : "Description of GraphQL",
            "image_url": "blogimage.png"
        },
        "relatedBlog" : {
            "name": "GraphQL Mutation",
            "description" : "Description of GraphQL Mutation",
            "image_url": "blogimage.png"
        }
    }
}

실습

이러한 개념을 더 잘 배우기 시작하면 Hasura에서 빠른 프로젝트를 시작하고 검색 입력으로 피드의 API를 구축하여 GraphQL 쿼리를 배울 수 있습니다.

창의력을 발휘할 수 있는 심플한 디자인입니다.



Hasura에 익숙하지 않은 경우 Hasura를 시작하는 방법에 대한 이 여러 부분으로 구성된 자습서를 따르십시오.

Build Sports API with GraphQL - Hasura - Part 1

메일링 리스트를 구독하고 Discord 커뮤니티에 가입하여 계속 지켜봐 주세요.

Discord