loading table of contents...

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 {

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

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

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

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}>

Search Results

Table Of Contents

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.