使用 Azure 静态 Web 应用程序时，GraphQL `in` 运算符不起作用

Question

我正在使用 Azure Static Web App 和 Azure SQL 数据库。过滤数据时，我想使用

in

而不是

eq

运算符。到目前为止，

eq

运算符正在按预期工作：

async function filterProducts() {
  const query = `
    query Products {
      products(filter: { category: { eq: "dairy" } }) {
        items {
          date
          category
          price
        }
      }
    }`;
  
  const filteredProducts = await fetch('/data-api/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: query })
  })
    .then((response) => response.json())
    .then((dataJson) => {
      const dataItems = dataJson.data.products.items;
      const dates = dataItems.map((product) => product.date);
      const prices = dataItems.map((product) => product.price);
      return { dates, prices };
    })
    .catch((err) => console.warn('Unable to fetch from the endpoint.', err));

  return filteredProducts;
}

但是，使用

in

运算符将收到 400 状态（错误请求）错误。这是输入查询：

  const query = `
    query Products {
      products(filter: { category: { in: ["dairy", "fruit"] } }) {
        items {
          date
          category
          price
        }
      }
    }`;

我在调用

localhost:4280/data-api/graphql

端点时收到错误：

无法加载资源：服务器响应状态为 400（错误请求）

是否可以从 Azure 静态 Web 应用程序使用

in

运算符？如何在 Azure Static Web App 中使用 GraphQL 过滤多个值？

Answer 1

最近的 Graph REST API 支持 $filter 和 in 条件。它的示例 URL 类似于

~/users?$filter=mail in ('[email protected]', '[email protected]')

。我希望你可以尝试

("dairy", "fruit")

而不是[“乳制品”，“水果”]。

参考文献

Graph API - 使用过滤器查询参数

Answer 2

启动静态 Web 应用程序 (SWA) 后，我使用 Postman 内省了 GrahpQL 架构。由于我使用 Svelte 前端框架，因此开发服务器正在侦听 5000 端口。因此，我在 URL 中提供了

http://localhost:5000/graphql

，转到 Schema 选项卡，并使用“使用 GraphQL 自省”加载架构。返回查询选项卡，我可以搜索可用的过滤选项：

就静态 Web 应用程序的 GraphQL API 而言，我看不到

in

过滤选项。可以使用单个字符串输入来检查相等性、包含条件或以条件开头。

针对此限制，我通过使用带有 for 循环的类别列表和

eq

过滤选项来实现解决方法：

async function filterProducts() {
  let result = [];
  const categories = ['dairy', 'fruit'];
  for (const category of categories) {
    const query = `
      query Products {
        products(filter: { category: { eq: "${category}" } }) {
          items {
            date
            category
            price
          }
        }
      }`;

    const filteredProducts = await fetch('/data-api/graphql', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ query: query })
    })
      .then((response) => response.json())
      .then((dataJson) => {
        const dataItems = dataJson.data.products.items;
        const dates = dataItems.map((product) => product.date);
        const prices = dataItems.map((product) => product.price);
        return { dates, prices };
      })
      .catch((err) => console.warn('Unable to fetch from the endpoint.', err));

    result = result.concat(filteredProducts);
  }

  return result;
}

它循环遍历所需的类别，从 API 端点获取它们，然后将每个类别附加到结果数组中。

注意：使用

in

运算符真的很好，但由于 SWA 有其自身的限制，我想“我们必须用我们拥有的东西来做饭”。