https://github.com/skatingincentralpark/nextjs-contentful-practice

Features Draft Mode API, on-demand validation and Tailwind Typography plugin for content.
https://github.com/skatingincentralpark/nextjs-contentful-practice

contentful nextjs tailwindcss

Last synced: 8 days ago
JSON representation

Features Draft Mode API, on-demand validation and Tailwind Typography plugin for content.

• Host: GitHub
• URL: https://github.com/skatingincentralpark/nextjs-contentful-practice
• Owner: skatingincentralpark
• Created: 2023-11-29T02:48:48.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-05T00:34:14.000Z (about 1 year ago)
• Last Synced: 2024-12-06T08:24:24.421Z (2 months ago)
• Topics: contentful, nextjs, tailwindcss
• Language: TypeScript
• Homepage: https://nextjs-contentful-practice-neon.vercel.app/
• Size: 83 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Exploring the schema with GraphiQL

You can explore and inspect the schema of a space using the GraphiQL, an in-browser GraphQL IDE.

To open GraphiQL server visit the `https://graphql.contentful.com/content/v1/spaces/{SPACE}/explore?access_token={CDA_TOKEN}` URL in your browser. You must provide the CDA_TOKEN as a query parameter.

To get SPACE and CDA_TOKEN, visit api keys on Contentful.

## Query Complexity Error

[Github Issue](https://github.com/vercel/next.js/discussions/33642)

https://www.contentful.com/developers/docs/references/graphql/#/introduction/query-complexity-limits

'Query cannot be executed. The maximum allowed complexity for a query is 11000 but it was 100200. Simplify the query e.g. by setting lower limits for collections.'

Fix: Update the settings for the content model Rich Text type to limit the number of the linked entities, blocks, etc. In the validation tab of the settings, I just checked all of the "Limit number of..." checkboxes and set the upper limit to 5.

## Styling Content With Prose

Something happening with Markdown component, overriding/not applying classNames. I have to do it in parent element with tailwind prose utility:

```tsx

  

```

## Webhooks

https://www.contentful.com/developers/docs/webhooks/overview/

Webhooks are HTTP callbacks which can be used to send notifications when data in Contentful is changed, allowing external systems to react to changes to do things like rebuild or invalidate the cache.

## Typescript: Children

There are two common paths to describing the children of a component.

- `React.ReactNode` type. Very broad definition. It's a union of all the possible types that can be passed as children in JSX

- `React.ReactElement` type, which is only JSX elements and not JavaScript primitives like strings or numbers.