⚡ Next GraphQL GraphCMS

A Next.js React app using Apollo GraphQL Client to fetch data from a GraphCMS (Hygraph) API.
Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

GraphQL is a Query Language for storing & querying data, an alternative to traditional protocols such as REST API. GraphQL allows the client to request ONLY the data it needs from the server.
The GraphCMS headless Content Management System (CMS) uses GraphQL to query data and perform mutations (updates). Here an API is created and accessed from a Next.js frontend. A query is created in the GraphCMS Playground.
GraphQL with GraphCMS is good for blogs, e-commerce, Customer Relationship Management (CRM) & productivity software, simple apps & websites
Headless means that content data is created using a schema, then managed & stored as a standalone component without presentation logic.
Next.js is for server-rendered react apps. It has automatic code splitting, simple page-based routing, built-in CSS support and hot reloading. Every component file in the pages folder is treated as a page
Home page shows list of posts (streams), Clicking on a stream link navigates to a post detail page.

GraphCMS endpoint needs to be added to apolloClient.js
npm run dev runs the app in the development mode. Open http://localhost:3000 to view it in the browser.
npm run build builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

tba

Status: Working - Basic. displays data from GraphCMS backend in Next.js frontend.
To-Do: Change image to next/image, Add data and change GraphQL schema to my blog. Add documentation & comments.