Headless CMS for React Native

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

Step #1 - Set up the Apollo Client in your app

To fetch data from a GraphQL API in a React Native app, you can use the Apollo Client library, which is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Here's an example of how to set up Apollo Client to fetch data and then use it in your React Native components.

ApolloClientSetup.js

// ApolloClientSetup.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const httpLink = new HttpLink({
  uri: 'https://api-<region>.hygraph.com/v2/<some hash>/master',
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

export default client;

Step #2 - Create a query and fetch the data

In the React Native component, we begin by constructing a GraphQL query named GET_ITEMS using the gql template literal provided by Apollo Client, which allows you to write your query inside a JavaScript file. This particular query requests a list of items, each with an id, title, and description. We then employ the useQuery hook, passing our GET_ITEMS query to it, which initiates a request to the GraphQL server.

The hook's response includes loading, error, and data states that we use to handle the different states of the request. If the request is in progress, a loading message is displayed. In the case of an error, an error message is shown. Once data is successfully fetched, it's rendered using a FlatList component, which iteratively displays each item's title and description in the user interface.

MyComponent.js

import React from 'react';
import { useQuery, gql } from '@apollo/client';
import { View, Text, FlatList } from 'react-native';

const GET_ITEMS = gql`
  query GetItems {
    items {
      id
      title
      description
    }
  }
`;

const MyComponent = () => {
  const { loading, error, data } = useQuery(GET_ITEMS);

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

  return (
    <FlatList
      data={data.items}
      keyExtractor={item => item.id}
      renderItem={({ item }) => (
        <View>
          <Text>{item.title}</Text>
          <Text>{item.description}</Text>
        </View>
      )}
    />
  );
};

export default MyComponent;

Step #3 - Add component to the main app file

In your main app file, wrap your app's root component with the ApolloProvider to provide the Apollo Client instance to your React component tree.

The imported component, which contains the FlatList and the Apollo Client query, is used just like any other React component. You add it to the JSX of your main component's return statement. When the main component renders, it will also render the imported component, which will execute the GraphQL query and display the results using the FlatList.

App.js

import React from 'react';
import { ApolloProvider } from '@apollo/client';
import client from './ApolloClientSetup';
import MyComponent from './MyComponent';

const App = () => (
  <ApolloProvider client={client}>
    <MyComponent />
  </ApolloProvider>
);

export default App;

Start building with React Native

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

Quickstart

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

Integrating a GraphQL-native headless CMS with a React Native application streamlines the development process, offering developers the agility to fetch exactly what's needed, reducing bandwidth, and speeding up the app. It simplifies data management and facilitates real-time UI updates, which is vital for modern mobile applications.

For content editors, the headless CMS provides a user-friendly interface to manage content without depending on technical staff, enabling them to push updates directly to the app. This synergy between the technical and editorial teams significantly boosts overall efficiency and productivity, fostering a more dynamic and responsive app environment.

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