Note: This repo is no longer officially maintained as of Jan, 2023. Feel free to use it, fork it and patch it for your own needs.

This project was bootstrapped with Create React App.

The Graphql and JS example app

The graphql js example app teaches the very basics of how to work with Contentful:

• consume content from the Contentful Delivery and Preview APIs
• model content
• edit content through the Contentful web app

The app demonstrates how decoupling content from its presentation enables greater flexibility and facilitates shipping higher quality software more quickly.

What is Contentful?

Contentful provides a content infrastructure for digital teams to power content in websites, apps, and devices. Unlike a CMS, Contentful was built to integrate with the modern software stack. It offers a central hub for structured content, powerful management and delivery APIs, and a customizable web app that enable developers and content creators to ship digital products faster.

Requirements

• Node 8
• Git

Without any changes, this app is connected to a Contentful space with read-only access. To experience the full end-to-end Contentful experience, you need to connect the app to a Contentful space with read and write access. This enables you to see how content editing in the Contentful web app works and how content changes propagate to this app.

Common setup

Clone the repo and install the dependencies.

git clone https://github.com/contentful/the-example-app.graphql.js.git
cd the-example-app.graphql.js

npm install

Steps for read-only access

To start the express server, run the following

npm start

http://localhost:3000 should open automatically; take a look around.

Deploy to Heroku

You can also deploy this app to Heroku:

Setup for Introspection Fragment Matcher

Because we create fragments over union types in this project, we need to use an IntrospectionFragmentMatcher. This fragment matcher needs to understand a bit more about our schema in order to function properly. We use a script to extract the schema and store it in a JSON file. This file is imported when the fragment matcher is constructed. The schema json is included in the project, but may need to be re-exported if the schema changes. You can do this with npm run fragmentTypesScript. More information about this script and fragment matchers can be found in the Apollo Client documentation here.