When I query for products attributes:
query MyQuery {
products {
edges {
node {
id
}
}
nodes {
attributes {
nodes {
name
options
position
visible
variation
scope
label
id
attributeId
}
}
}
}
}
I get part of result:
{
"name": "Capacity",
"options": [
"95-ml"
],
{
"name": "Manufacturer",
"options": [
"pascal-morabito"
],
The problem is with options, this display options like: pascal-morabito but i not see any field to display full option name like
Pascal Morabitoor95 mlNext problem, I have query for display products WHERE category slug per page 25 products. With this products I map all attributes, and problem is in my ecoommerce filter example when I have in category 200 products, and when I display 25 products per page, then I see only attributes for sort for current page, but should display attributes to sort for all pages.
Here is my hook:
export const useProductsData = (offset, size) => {
const params = useParams()
const { handle } = params;
const [products, setProducts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [paginationInfo, setPaginationInfo] = useState({});
const fetchProductsData = async () => {
const query = gql`
query GetProducts($offset: Int, $size: Int) {
products(where: {offsetPagination: {offset: $offset, size: $size}, categoryIn: "${handle}", stockStatus: IN_STOCK}) {
nodes {
id
sku
slug
status
name
attributes {
nodes {
label
options
}
}
image {
sourceUrl
}
... on SimpleProduct {
id
name
price
}
... on VariableProduct {
id
name
price
}
}
pageInfo {
offsetPagination {
hasMore
hasPrevious
total
}
}
}
}
`;
try {
const result = await fetchWooCommerceData(query, { offset, size, handle });
setProducts(result.products.nodes);
setPaginationInfo({
...result.products.pageInfo,
totalPages: Math.ceil(result.products.pageInfo.offsetPagination.total / size),
});
setLoading(false);
} catch (error) {
setError(error);
setLoading(false);
}
};
// Call fetchProductData directly when the hook is invoked
useEffect(() => {
fetchProductsData();
}, [offset, size, handle]);
console.log("await", paginationInfo);
return { products, loading, error, paginationInfo };
};
Here is screenshot, i have in this category example 1000products, but i can filter attributes only on current page so 25 products.
