Headless CMS for Qwik

Hygraph is the ideal Headless CMS for Qwik websites and applications. Read further to learn how our API-first CMS allows you to add components to your Qwik apps in minutes and enable your website's content to be managed from a powerful CMS.

Step #1 - Construct your query and fetch the content from the headless CMS

To fetch the content from the headless CMS you can use Qwik's useResource$ for managing asynchronous operations, such as fetching data. The fetch request is made to the Hygraph's GraphQL endpoint, using the POST method, and includes headers for content type and authorization.

The authorization header carries a bearer token for secure access which you can retrieve in your Hygraph project settings. The body of the request contains the GraphQL query as a JSON string.

import { component$, useResource$ } from '@builder.io/qwik';

export const fetchData = component$(() => {
  const resource = useResource$(() => {
    return fetch('https://api-<region>.hygraph.com/v2/<some hash>/master', {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json',
        'Authorization': 'Bearer YOUR_HYGRAPH_TOKEN'  // Add your token here
      },
      body: JSON.stringify({
        query: `YOUR_GRAPHQL_QUERY`,
      }),
    })
    .then(response => response.json())
    .catch(error => console.error('Error fetching data:', error));
  });

  return resource;
});

Step #2 - Displaying content in Qwik

One the content is fetched you can use it in a Qwik component. This component utilizes the fetchData function defined earlier to obtain resources. The useResource$ hook manages the asynchronous fetching process.

This approach provides a responsive and user-friendly way to handle and display content fetched from a GraphQL API in a Qwik application.

import { component$ } from '@builder.io/qwik';

export default component$((props) => {
  const { data } = props;

  return (
    <div>
      {data && data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
});

Start building with Qwik and Hygraph

We made it really easy to set up your project in Hygraph and use our GraphQL API within your Qwik project.

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Qwik website or app.

Get Started

Learn GraphQL

Hygraph is GraphQL-native Headless CMS offers precise data retrieval, minimizing over-fetching and optimizing efficiency.

Read the Guide

Examples

Look at some of the example projects to see Hygraph in action.

See Examples

Why Hygraph

Choosing Hygraph for your Qwik project

Using a GraphQL-native headless CMS such as Hygraph with a Qwik application benefits both developers and content editors. Developers enjoy a streamlined workflow, as GraphQL allows precise data fetching, reducing unnecessary data retrieval and boosting performance. This aligns well with Qwik's efficient handling of dynamic data.

Content editors, on the other hand, get an intuitive interface for managing content, free from concerns about the app's structure or performance. This separation enables editors to focus solely on content, while real-time updates via GraphQL facilitate a seamless, collaborative workflow between the editorial and development teams. The result is a more efficient content management process and a better end-user experience.

Developer Experience

We try to be the most un-opinionated CMS on the market with a wide collection of open source example projects to get you started.

Headless CMS

As a headless CMS (i.e. API based content management), you can be as modular and flexible as you need. We even support multiplatform content management.

Management API

Hygraph boasts a flexible and powerful management API to manage your content and schema, as well as a blazing fast content API.

Get started for free, or request a demo to discuss larger projects

Contact sales Get started