Headless Server Developer Manual / 14.2.1 Retrieving All Sites from CoreMedia Headless Server

Headless Server Developer Manual / Version 2310

Table Of Contents

14.2.1 Retrieving All Sites from CoreMedia Headless Server

A first simple step to display data from CoreMedia is to get a list of all available sites. For this create a new file SitesList.jsx which includes a React component SitesList and the GraphQL query.

import React from 'react';
import {gql, useQuery} from "@apollo/client";

const ALL_SITES_QUERY = gql`
query GetAllSites {
  content {
    sites {
      id
      name
      locale
    }
  }
}
`;

function SitesList() {
  const {loading, error, data} = useQuery(ALL_SITES_QUERY);

  if (loading) {
    return <p>Loading...</p>;
  }
  if (error) {
    return <p>Error :(</p>;
  }

  return (
    <div>
      <h1>{data.content.sites.length} Sites available</h1>
      <ul>
        {data.content.sites.map((site =>
          <li id={site.id}>{site.name} ({site.locale})</li>
        ))}
      </ul>
    </div>
  );
}

export default SitesList;

Example 14.2. Example Component rendering all available sites as a list

Add this component to your App.jsx inside the ApolloProvider and you should see the list of all available sites with the name and locale.

import SitesList from "./SitesList";
...
  return (
    <ApolloProvider client={client}>
      <SitesList/>
    </ApolloProvider>
  );

Search Results

Table Of Contents