Implementing GraphQL in Hyvä: A Modern Approach to Data Fetching

Hyvä Theme is optimized for performance and simplifies Magento’s frontend, but it still supports GraphQL in Hyvä for efficient data fetching, particularly in cases where traditional REST APIs or direct database queries may not be ideal. Hyvä theme GraphQL integration allows for flexible, performant, and structured data retrieval, making it a great choice for modern Magento development.

Magento 2 GraphQL with Hyvä: Why Use GraphQL?

Unlike Magento’s traditional REST or SOAP APIs, Hyvä data fetching using GraphQL allows you to:

• Fetch only the required data (reducing unnecessary payloads)
• Make fewer requests (combine multiple queries in a single request)
• Reduce frontend complexity (simplifies state management and API calls)
• Improve performance (less data transfer compared to REST)

GraphQL vs. REST in Hyvä

Setting Up GraphQL in Hyvä

Magento comes with GraphQL enabled by default. Ensure that the Magento GraphQL endpoint is accessible:

https://yourdomain.com/graphql

If GraphQL is not working, make sure your store is running in developer or production mode and the GraphQL schema is properly generated.

Run:

php bin/magento setup:upgrade

php bin/magento cache:flush

Hyvä doesn’t rely on KnockoutJS or Magento UI Components, so we need a native Hyvä theme GraphQL integration using:

• Alpine.js (for lightweight interactivity)
• Fetch API or Apollo Client (for GraphQL queries)

Basic Example: Fetch Product Data with Fetch API

fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        query: `
            query {
                products(filter: { sku: { eq: "24-MB01" } }) {
                    items {
                        name
                        price {
                            regularPrice {
                                amount {
                                    value
                                    currency
                                }
                            }
                        }
                    }
                }
            }
        `
    })
})
.then(response => response.json())
.then(data => console.log(data));

Using Alpine.js to Bind Data Dynamically

<div x-data="{ product: {} }" x-init="fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: `query { products(filter: { sku: { eq: \"24-MB01\" } }) { items { name } } }` })
}).then(response => response.json())
.then(data => product = data.data.products.items[0])">
    <h1 x-text="product.name"></h1>
</div>

This binds product data dynamically using Alpine.js.

Advanced Use Cases

Unlike REST, Magento 2 GraphQL with Hyvä allows multi-resource requests in a single call.

Example: Fetch categories and products in one request.

const query = `
    query {
        categories(filters: { name: { match: "Men" } }) {
            items { name id }
        }
        products(search: "T-Shirt") {
            items { name sku }
        }
    }
`;
fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query }) })
.then(res => res.json())
.then(data => console.log(data));

Use mutations to update cart or checkout in Hyvä.

Example: Add a product to the cart

const mutation = `
    mutation {
        addSimpleProductsToCart(input: {
            cart_id: "123456789",
            cart_items: [{ sku: "24-MB01", quantity: 1 }]
        }) {
            cart { items { product { name } } }
        }
    }
`;
fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: mutation }) })
.then(res => res.json())
.then(data => console.log(data));

Optimizing Hyvä Theme with GraphQL

To optimize Hyvä theme with GraphQL, follow these best practices:

• Enable GraphQL Caching: Magento supports GraphQL query caching to speed up responses.
• Use Persisted Queries:> Instead of sending long GraphQL queries, cache them as short query IDs.
• Leverage Magento’s Varnish Cache: Store GraphQL responses for faster access.
• Optimize Query Depth & Complexity: Avoid deeply nested queries to prevent performance issues.

Optimize your Magento 2 store with VDC Store's Hyvä Theme development services. By optimizing the Hyvä theme with GraphQL, we ensure improved performance and seamless data fetching, enhancing your store's overall efficiency.