Headless CMS for Solid.js

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

Step #1 - Create a GraphQL client

First, you must set up a GraphQL client for your Solid.js application using the graphql-request library. The GraphQLClient is instantiated with an endpoint URL, representing the location of the GraphQL server. Additionally, it configures the client's headers to include an authorization token if required by the server for secure access.

This setup is crucial as it encapsulates the details for connecting to the GraphQL API and provides a reusable client instance that can be imported and used across different components in the application to make GraphQL queries or mutations.

graphqlClient.js

import { GraphQLClient } from 'graphql-request';

const endpoint = 'https://api-<region>.hygraph.com/v2/<some hash>/master';

export const client = new GraphQLClient(endpoint, {
  headers: {
    authorization: 'Bearer YOUR_AUTH_TOKEN', // If needed
  },
});

Step #2 - Fetch Data in a Solid.js Component

Use the graphql-request client within a Solid.js component to fetch data from the GraphQL API. You can use Solid.js's reactive primitives like createResource to handle async operations.

The createResource function is used to fetch data asynchronously when the component mounts and re-render the component with the new data once it's available. The For directive is then used to iterate over the user data and display it.

YourComponent.jsx

import { createResource } from 'solid-js';
import { client } from './graphqlClient';

const query = `
  {
    allUsers {
      id
      name
      email
    }
  }
`;

function YourComponent() {
  const [data] = createResource(query, async () => {
    try {
      const data = await client.request(query);
      return data.allUsers;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  });

  return (
    <div>
      <h1>Users</h1>
      <For each={data()}>
        {(user) => (
          <div>
            <p>{user.name}</p>
            <p>{user.email}</p>
          </div>
        )}
      </For>
    </div>
  );
}

export default YourComponent;

Start building with Solid.js

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

Quickstart

Check out our docs to see how you can quickly set up your Hygraph project and enable the content API for your Solid.js 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 Solid.js project

Integrating a GraphQL-native headless CMS with a Solid.js application streamlines content management and application development. Developers benefit from GraphQL's powerful query language, which enables precise data retrieval, reducing over-fetching and under-fetching issues. This efficiency accelerates development cycles and enhances performance.

Content editors appreciate the intuitive interfaces of headless CMSs, which allow them to manage content without concerning themselves with the underlying technical complexities. The decoupled nature of headless CMSs also ensures content agility, enabling editors to push updates in real-time across multiple platforms, a vital feature in today's fast-paced digital landscape.

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