https://github.com/timfuhrmann/next-graphql-apollo-contentful

A Next.js application built with Styled Components, Contentful's GraphQL API and Apollo.
https://github.com/timfuhrmann/next-graphql-apollo-contentful

apollo contentful graphql nextjs react

Last synced: 2 days ago
JSON representation

A Next.js application built with Styled Components, Contentful's GraphQL API and Apollo.

• Host: GitHub
• URL: https://github.com/timfuhrmann/next-graphql-apollo-contentful
• Owner: timfuhrmann
• Created: 2021-07-05T18:02:18.000Z (over 3 years ago)
• Default Branch: develop
• Last Pushed: 2021-07-07T16:30:53.000Z (over 3 years ago)
• Last Synced: 2024-12-07T01:42:07.726Z (about 2 months ago)
• Topics: apollo, contentful, graphql, nextjs, react
• Language: TypeScript
• Homepage:
• Size: 937 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
In progress:  [Next.js](https://nextjs.org/) project using [Typescript](https://www.typescriptlang.org/), [Styled Components](https://styled-components.com/), [Contentful's GraphQL API](https://www.contentful.com/developers/docs/references/graphql/) and [Apollo](https://www.apollographql.com/).

## Static Generation

The portfolio and its contents are statically pre-rendered and revalidated every 24 hours. 


To do so, the following steps are being followed:

Respective files:

1. [Project Page](pages/project/[slug].tsx)

2. [GraphQL](app/lib/api)

### First step

Within `getStaticPaths`, fetch all project identifiers to tell Next.js what params to expect/pre-render:

```typescript

export const getStaticPaths = async () => {

    const slugs = await getProjectSlugs();

    const paths = slugs.map(item => ({

        params: { slug: item.slug },

    }));

    // Pre-render only fetched paths at build time.

    // Server-side render on demand if the path doesn't exist.

    return { paths, fallback: "blocking" };

};

```

```typescript

// query.ts

export const PROJECT_SLUGS = gql`

    query GetProjectSlugs {

        projectCollection {

            items {

                slug

            }

        }

    }

`;

// slugs.ts

export const getProjectSlugs = async (): Promise => {

    const { data } = await client.query({ query: PROJECT_SLUGS });

    return extractProjectsSlugsCollection(data);

};

```

### Second step

Within `getStaticProps`, use `params` to fetch the respective product on build:

```typescript

export const getStaticProps: GetStaticProps = async ({ params }) => {

    const slug = params?.slug;

    if (!slug || "string" !== typeof slug) {

        return {

            notFound: true,

        };

    }

    const project = await getProjectBySlug(slug);

    if (!project) {

        return {

            notFound: true,

        };

    }

    return {

        props: { project },

        revalidate: 60 * 60 * 24,

    };

};

```

## Getting Started

Run the development server:

```bash

npm run dev

# or

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.