https://github.com/contentful/the-example-app.graphql.js
Example app for Contentful with GraphQL with React
https://github.com/contentful/the-example-app.graphql.js
Last synced: 10 months ago
JSON representation
Example app for Contentful with GraphQL with React
- Host: GitHub
- URL: https://github.com/contentful/the-example-app.graphql.js
- Owner: contentful
- Archived: true
- Created: 2018-09-05T09:19:45.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-18T12:41:27.000Z (over 3 years ago)
- Last Synced: 2024-09-27T10:03:57.630Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 4.24 MB
- Stars: 19
- Watchers: 7
- Forks: 10
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
> **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](https://github.com/facebookincubator/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](https://www.contentful.com) 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.
```bash
git clone https://github.com/contentful/the-example-app.graphql.js.git
cd the-example-app.graphql.js
```
```bash
npm install
```
## Steps for read-only access
To start the express server, run the following
```bash
npm start
```
[http://localhost:3000](http://localhost:3000) should open automatically; take a look around.
## Deploy to Heroku
You can also deploy this app to Heroku:
[](https://heroku.com/deploy)
## 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](https://www.apollographql.com/docs/react/advanced/fragments.html).