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?
2
Answers
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: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:It loops through the desired categories, fetches them from the API endpoint, and then appends each category to a result array.
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"].References
Graph API – Use the filter query parameter