We have created a sample product catalog app that is built using Contentstack’s Apollo client SDK. The content of this app is powered by Contentstack GraphQL APIs, and the app uses Apollo client on the client side to consume GraphQL APIs.
This document covers the steps to get this app up and running for you. Try out the app and play with it, before building bigger and better applications.
Perform the steps given below to get started with this app.
Log in to your Contentstack account, and create a new stack. Read more about stack.
Add a publishing environment to publish your content in Contentstack. Provide the necessary details as per your requirement. Read more about environments.
For this app, we need one content type: Product. Here’s what it is needed for:
- Product: Lets you add the product content into your app.
For quick integration, we have already created the content type. Download the content types and import it to your stack. (If needed, you can create your own content types. Read more about Content Types.)
Now that all the content types are ready, let’s add some content for your Product app.
Create and Publish entries for the ‘Product’ content type.
Now that we have created the sample data, it’s time to use and configure the presentation layer.
To get your app up and running quickly, we have created a sample javascript app for this project. You need to download it and change the configuration. Download the app using the command given below:
$ git clone https://github.com/contentstack/contentstack-js-graphql-example.git
Once you have downloaded the project, add your Contentstack API Key, Delivery Token, and Environment to the project during the SDK initialization step. (Learn how to find your Stack's API Key and Delivery Token. Read more about Environments.)
Begin by including packages that are essential for building the Apollo app. Install the following modules using the npm install command. Refer the Installation doc for more information.
In order to invoke Apollo as part of the JavaScript and for routing and templating purpose, add the express and express-nunjucks modules to the server file, app.js.
Add the ‘apollo-client’ and ‘apollo-cache-inmemory’ parameters in ‘apollo-client’ instance.
const express = require('express');
const expressNunjucks = require('express-nunjucks')
const app = express();
var { ApolloClient } = require('apollo-client');
var { InMemoryCache } = require('apollo-cache-inmemory');
var { HttpLink } = require('apollo-link-http');
var gql = require("graphql-tag");
var fetch = require('node-fetch');
Create a single shared instance of 'Apollo-link' and point it at your GraphQL server. Under the HttpLink module instance, set the URL of GraphQL schema under the uri parameter and use fetch to fetch the data from graphql API.
const cache = new InMemoryCache();
const link = new HttpLink({
uri:'https://graphql.contentstack.com/stacks/blt44d915c18f115370?access_token=cs551d666a332e455a34174bd0&environment=production',
fetch
})
const client = new ApolloClient({
cache,
link
})
Contentstack provides a GraphQL playground, which is a GraphiQL interface, to test your GraphQL queries in your browser. Use this interface to write and test your queries.
Open a browser of your choice and hit the URL given below:
https://graphql.contentstack.com/stacks/api_key?access_token=environment-specific_delivery_token&environment=environment_name
To fetch all entries of ‘Product’ content type, add the following code snippet in the server file(app.js).
client
.query({
query: gql`query { all_product{
title
description
} }`,
.then(result =>
res.render('./index', result)
//console.log(result.data.all_product.items)
)
The query will return the data for only the specific fields(‘title’, ‘description’) of the content type and store in result as an object and will render in index.html file.
Now that we have a working project, you can build and run it using following commands.
- npm install
- node app.js