GraphQL：如何使用 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 的類型為 String，因為您可以使用點語法存取物件上的巢狀屬性。

例如，可以透過包含此 Sift 查詢進行過濾： { field: 'author.name.last', filter: JSON.stringify({ $eq: "Orwell" }) }

缺點和注意事項

當然，這是使用字串來表達 Sift 查詢語言，這很容易出錯——因此使用這種方法需要仔細的驗證和錯誤處理。

透過使用通用的 SiftQueryInput 類型來收集使用者的過濾器，您將失去 GraphQL 的類型安全性 - 它無法驗證該欄位是否存在或您的過濾器是否以正確的方式使用該欄位。

清單的資料需要在過濾解析器執行時完全解析。它無法存取查詢中尚未解決的欄位。但對於資料不是來自具有自己查詢的資料庫（可能來自 JSON 檔案或 REST API 回應）的情況，這無論如何都是可能的。

未來的改進

我認為在這種情況下失去 GraphQL 安全性是一種恥辱。可以在建置時將可能的 Sift 查詢選項編譯到 GraphQL 模式中，因此語法更相似地反映 Sift 的實際情況，而不依賴字串。

結論

總之，在 GraphQL 中使用 Sift.js 提供了一種靈活且強大的方法來實現任意過濾。它為清單中的純 JavaScript 物件帶來了通常為 ORM 和某些 GraphQL 供應商保留的自動查詢優勢，無論其來源為何。

透過在 GraphQL 伺服器中提供通用過濾“引擎”，以及可應用於任何類型的靈活查詢語言，將過濾邏輯轉移到 GraphQL 用戶端。這使得濾波器的迭代速度更快，並在濾波器中實現更大程度的表達。

我很想聽聽您在 GraphQL 中實現過濾的想法和經驗 - 在下面的評論中分享！

以上是GraphQL：如何使用 Sift.js 啟用任意清單過濾。的詳細內容。更多資訊請關注PHP中文網其他相關文章！