GraphQL: Sift.js를 사용하여 임의 목록 필터링을 활성화하는 방법.-JS 튜토리얼-php.cn

GraphQL: Sift.js를 사용하여 임의 목록 필터링을 활성화하는 방법.

王林

풀어 주다： 2024-08-05 20:07:20

원래의

330명이 탐색했습니다.

GraphQL: How to Enable Arbitrary List Filtering with Sift.js.

원본

GraphQL 스키마에는 목록 데이터 유형이 있는 경우가 많으며 일반적인 요구 사항은 일부 입력 변수를 기반으로 목록을 필터링하는 것입니다. 필터링은 사용자가 필요한 데이터만 검색하여 애플리케이션을 더욱 효율적이고 사용자 친화적으로 만드는 중요한 기능입니다.

데이터베이스 앞의 Prisma와 같이 쿼리를 지원하는 외부 데이터 소스를 사용할 때 필터링에 사용할 수 있는 라이브러리와 리소스가 많이 있습니다. 그러나 GraphQL 객체 목록을 반환하는 자체 해석기를 작성할 때 필터링 논리를 추상화하여 스키마 전체에서 재사용 가능하게 만드는 것이 좋습니다.

도서 목록에 대한 간단한 GraphQL 스키마를 고려해 보겠습니다.

type Book {
  title: String
  price: Float
}

type Query {
  books: [Book]
}

로그인 후 복사

그리고 간단한 목록에서 도서 목록을 반환하는 다음 리졸버입니다. 이는 모든 데이터 소스가 될 수 있습니다.

const books = [
  { title: 'The Great Gatsby', price: 10.99 },
  { title: 'To Kill a Mockingbird', price: 12.99 },
  // more books
];

const resolvers = {
  Query: {
    books: () => books,
  },
};

로그인 후 복사

예를 들어 사용자가 다음 기준에 따라 책을 필터링해야 한다고 가정해 보겠습니다.

제목이 무엇으로 시작하는지
가격이 다음보다 작거나 큼

GraphQL에서 개별 필터와 논리를 정의하는 방법

필터를 구현하는 한 가지 방법은 각각을 개별적으로 정의하는 것입니다. 여기에는 GraphQL 스키마 입력 유형을 변경하고 확인자 논리에 필터를 구현하는 작업이 포함됩니다.

이러한 새 입력 변수를 포함하도록 스키마를 업데이트하여 허용되는 필터와 이를 사용하는 데 필요한 매개변수를 표현할 수 있습니다.

input BookFilter {
  titleStartsWith: String
  priceLessThan: Float
  priceGreaterThan: Float
}

type Query {
  books(filter: BookFilter): [Book]
}

로그인 후 복사

업데이트된 리졸버는 다음과 같습니다.

const resolvers = {
  Query: {
    books: (_, { filter }) => {
      return books.filter(book => {
        if (filter.titleStartsWith && !book.title.startsWith(filter.titleStartsWith)) {
          return false;
        }
        if (filter.priceLessThan !== undefined && book.price >= filter.priceLessThan) {
          return false;
        }
        if (filter.priceGreaterThan !== undefined && book.price <= filter.priceGreaterThan) {
          return false;
        }
        return true;
      });
    },
  },
};

로그인 후 복사

이 구문을 사용한 쿼리는 비교적 이해하기 쉽습니다. 필요한 경우 필터 입력 필드에 대한 값을 제공하여 GraphQL 해석기에 필터 인수를 제공합니다.

이 접근 방식의 이점

사용자가 사용할 수 있도록 허용하려는 필터만 지원됩니다.

이는 허용된 것 이외의 필터링을 허용하지 않는 GraphQL 유형 유효성 검사 시스템의 지원을 받습니다. 백엔드 자체의 리졸버 코드는 허용되지 않는 필터도 지원하지 않습니다.

이 접근 방식의 단점

GraphQL 스키마와 코드 구현에서 각 필터를 개별적으로 정의해야 합니다.

이 코드는 서로 다른 GraphQL 개체 간에 쉽게 공유할 수 없습니다. 비디오도 있고 이를 필터링하려면 비디오에 대한 새로운 필터링 입력 유형이 필요합니다. (필터 입력으로 일반화할 수 있지만 책과 비디오는 다를 수 없습니다.)

새 필터에 대한 요구 사항이 있는 경우 입력 필터 유형에 추가하고 이를 지원하도록 해석기 코드를 업데이트하는 코드 변경이 필요합니다.

예를 들어 시작 부분뿐만 아니라 어디에서나 하위 문자열이 포함된 제목을 필터링하려는 경우 이는 새로운 필터 입력이며 리졸버의 새로운 구현입니다.

필터 입력으로 Sift 쿼리 언어를 허용하여 임의 필터링

제가 찾은 흥미로운 라이브러리인 sift를 사용하면 MongoDB 쿼리 구문을 사용하여 JavaScript에서 임의의 데이터 목록을 쉽게 필터링할 수 있습니다. 저는 이것이 정말 멋지고 GraphQL에서 임의 필터링을 활성화할 수 있다고 생각합니다. 헤드리스 CMS Strapi는 이전에 Sift를 사용한 후 GraphQL 쿼리를 활성화하기 위해 더욱 맞춤화된 솔루션으로 전환했습니다!

이것이 일부 ORM 및 공급자가 GraphQL 서비스에 내장한 유용한 자동 필터링을 어느 정도 재현하는 방법인 것처럼 보였기 때문에 가장 흥미로웠습니다. 데이터가 특정 데이터베이스에서 나온 것이 아니더라도 상관없습니다.

위 스키마를 다음과 같이 다시 작성할 수 있습니다.

input SiftQueryInput {
  field: String
  filter: String
}

type Query {
  books(filter: [SiftQueryInput]): [Book]
}

로그인 후 복사

리졸버는 다음을 수행합니다.

const sift = require('sift').default;

const resolvers = {
  Query: {
    books: (_, { filter }) => {
      const siftQuery = filter.reduce((acc, { field, filter }) => {
        acc[field] = JSON.parse(filter);
        return acc;
      }, {});
      return books.filter(sift(siftQuery));
    },
  },
};

로그인 후 복사

그럼 어떻게 작동하나요? 'The'로 시작하는 모든 책을 쿼리한다고 가정해 보겠습니다. 다음 쿼리를 실행할 수 있습니다.

query {
  books(filter: [{ field: "title", filter: "{\"$regex\": \"^The\"}" }]) {
    title
    price
  }
}

로그인 후 복사

다음 변수 사용:

{
  "filter": [
    { "field": "title", "filter": "{\"$regex\": \"^The\"}" }
  ]
}

로그인 후 복사

그리고 예상대로 '위대한 개츠비'로만 필터링된 목록이 반환됩니다!

또 다른 예를 들어, 문자 'i'를 포함하고 가격이 10보다 큰 책을 필터링하려는 경우 다음 변수를 제공합니다.

{
  "filter": [
    { "field": "title", "filter": "{\"$regex\": \"i\"}" },
    { "field": "price", "filter": "{\"$gt\": 10}" }
  ]
}

로그인 후 복사

그리고 '앵무새 죽이기' 책도 돌려받게 됩니다!

쿼리, 스키마 또는 확인자에서 아무것도 변경할 필요가 없었습니다. 다른 접근 방식에서는 새로운 필터 입력이 필요했던 완전히 새로운 필터를 Sift 쿼리 구문을 사용하여 변수로 표현할 수 있었습니다!

이 접근 방식의 이점

이제 Sift가 지원하는 모든 필터링 논리를 쿼리에 표현할 수 있습니다. 다양한 필터에 대한 새로운 요구 사항이 발생하는 경우 새로운 입력 유형 및 해석기 논리로 업데이트할 필요가 없습니다.

모든 유형에 동일한 필터링 방법을 사용할 수 있습니다! SiftQueryInputs 목록을 받아들이고 해당 Sift 입력을 처리하고 이를 객체 목록에 적용하는 백엔드 구현은 목록 유형에 따라 변경되지 않습니다.

이 기능은 모양이 변경되거나 중첩되는 경우 개체를 쉽게 지원합니다. SiftQueryInput.field는 점 구문을 사용하여 객체의 중첩 속성에 액세스할 수 있으므로 문자열 유형입니다.

예를 들어 다음 Sift 쿼리를 포함하여 필터링하는 것이 가능합니다. { field: 'author.name.last', filter: JSON.stringify({ $eq: "Orwell" }) }

단점 및 주의사항

물론 이는 오류가 발생하기 쉬운 Sift 쿼리 언어를 표현하기 위해 문자열을 사용하므로 이 접근 방식을 사용하려면 신중한 검증과 오류 처리가 필요합니다.

일반 SiftQueryInput 유형을 사용하여 사용자 필터를 수집하면 GraphQL의 유형 안전성이 상실됩니다. 즉, 필드가 존재하는지 또는 여기에서 필터가 올바른 방식으로 사용하고 있는지 확인할 방법이 없습니다.

필터링 해석기가 실행되는 시점에 목록의 데이터가 완전히 해석되어야 합니다. 아직 해결되지 않은 쿼리 아래의 필드에는 액세스할 수 없습니다. 하지만 데이터가 자체 쿼리가 있는 DB에서 나오지 않는 상황에서는 JSON 파일이나 REST API 응답에서 나올 수도 있습니다.