Question 378661 in Azure Question posted in
The official documentation to get you started can be found here.

GraphQL `in` operator is not working when using Azure Static Web App

I am using Azure Static Web App with Azure SQL database. When filtering the data, I want to use the in instead of the eq operator. So far the eq operator is working as expected:

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;
}

However, using the in operator will get a 400 status (Bad Request) error. This is the input query:

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

And I got the error when calling the localhost:4280/data-api/graphql endpoint:

Failed to load resource: the server responded with a status of 400 (Bad Request)

Is it possible to use the in operator from an Azure Static Web App? How to filter multiple values using GraphQL in Azure Static Web App?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After starting the Static Web Application (SWA), I introspected the GrahpQL schema with Postman. Since I am using the Svelte frontend framework, the development server is listening on the 5000 port. So I provided the http://localhost:5000/graphql in the URL, went to the Schema tab, and loaded the schema with the "Using GraphQL introspection.". Back to the Query tab, I can search the available filtering options:

    postman filtering options

    Regarding the Static Web App's GraphQL API, I cannot see the in filtering options. It is possible to check equality, containing or starting with conditions using a single string input.

    With this limitation, I implemented a workaround by using a category list with a for loop, and the eq filtering option:

    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;
}

    It loops through the desired categories, fetches them from the API endpoint, and then appends each category to a result array.

    Note: It would be nice to use the in operator but since SWA has its limitation, I guess "we have to cook with what we have".


  2. 0

    The recent Graph REST API supports $filter with in condition. The sample url for it will be like ~/users?$filter=mail in ('[email protected]', '[email protected]'). I hope you can try ("dairy", "fruit") rather than ["dairy", "fruit"].

    enter image description here

    References

    Graph API – Use the filter query parameter

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search