Skip to content

Commit

Permalink
feat(contentful): add support for tags (#31746)
Browse files Browse the repository at this point in the history
Co-authored-by: axe312ger <opensource@axe312.dev>
  • Loading branch information
axe312ger and axe312ger committed Jul 15, 2021
1 parent 848b56e commit 15b49b6
Show file tree
Hide file tree
Showing 17 changed files with 382 additions and 33 deletions.
41 changes: 41 additions & 0 deletions e2e-tests/contentful/cypress/integration/tags.js
@@ -0,0 +1,41 @@
describe(`tags`, () => {
beforeEach(() => {
cy.visit("/tags").waitForRouteChange()
})
it(`Tag list`, () => {
cy.get('[data-cy-id="tag-numberDecimal"] [data-cy-name]').should(
"have.text",
"Number: Decimal"
)
cy.get('[data-cy-id="tag-numberDecimal"] [data-cy-id]').should(
"have.text",
"numberDecimal"
)
cy.get('[data-cy-id="tag-numberInteger"] [data-cy-name]').should(
"have.text",
"Number: Integer"
)
cy.get('[data-cy-id="tag-numberInteger"] [data-cy-id]').should(
"have.text",
"numberInteger"
)
cy.get('[data-cy-id^="tag-"]').should("have.length", 2)
})
it(`Filtered Entries`, () => {
cy.get('[data-cy-integers] [data-cy-id="number-integer"]').should(
"have.length",
1
)
cy.get(
'[data-cy-integers] [data-cy-id="number-integer"] [data-cy-value]'
).should("have.text", 42)

cy.get('[data-cy-decimals] [data-cy-id="number-decimal"]').should(
"have.length",
1
)
cy.get(
'[data-cy-decimals] [data-cy-id="number-decimal"] [data-cy-value]'
).should("have.text", 4.2)
})
})
1 change: 1 addition & 0 deletions e2e-tests/contentful/gatsby-config.js
Expand Up @@ -11,6 +11,7 @@ module.exports = {
// Use: https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/
spaceId: `k8iqpp6u0ior`,
accessToken: `hO_7N0bLaCJFbu5nL3QVekwNeB_TNtg6tOCB_9qzKUw`,
enableTags: true,
},
},
`gatsby-transformer-remark`,
Expand Down
6 changes: 6 additions & 0 deletions e2e-tests/contentful/src/pages/index.js
Expand Up @@ -45,6 +45,12 @@ const IndexPage = () => (
<Link to="/text">/text</Link>
</li>
</ul>
<h2>Metadata</h2>
<ul>
<li>
<Link to="/tags">/tags</Link>
</li>
</ul>
</Layout>
)

Expand Down
94 changes: 94 additions & 0 deletions e2e-tests/contentful/src/pages/tags.js
@@ -0,0 +1,94 @@
import { graphql } from "gatsby"
import * as React from "react"
import slugify from "slugify"

import Layout from "../components/layout"

const TagsPage = ({ data }) => {
const tags = data.tags.nodes
const integers = data.integers.nodes
const decimals = data.decimals.nodes

return (
<Layout>
<h1>Tag Listing:</h1>
{tags.map(tag => {
return (
<div data-cy-id={`tag-${tag.contentful_id}`} key={tag.contentful_id}>
<h2 data-cy-name>{tag.name}</h2>
<p>
ID: <span data-cy-id>{tag.contentful_id}</span>
</p>
</div>
)
})}
<hr />
<h1>Filtered Entries:</h1>
<h2>Integers:</h2>
<div data-cy-integers>
{integers.map(({ title, integer }) => {
const slug = slugify(title, { strict: true, lower: true })
return (
<div data-cy-id={slug} key={slug}>
<h3>{title}</h3>
<p data-cy-value>{integer}</p>
</div>
)
})}
</div>
<h2>Decimals:</h2>
<div data-cy-decimals>
{decimals.map(({ title, decimal }) => {
const slug = slugify(title, { strict: true, lower: true })
return (
<div data-cy-id={slug} key={slug}>
<h3>{title}</h3>
<p data-cy-value>{decimal}</p>
</div>
)
})}
</div>
</Layout>
)
}

export default TagsPage

export const pageQuery = graphql`
query TagsQuery {
tags: allContentfulTag(sort: { fields: contentful_id }) {
nodes {
name
contentful_id
}
}
integers: allContentfulNumber(
sort: { fields: contentful_id }
filter: {
metadata: {
tags: { elemMatch: { contentful_id: { eq: "numberInteger" } } }
}
node_locale: { eq: "en-US" }
}
) {
nodes {
title
integer
}
}
decimals: allContentfulNumber(
sort: { fields: contentful_id }
filter: {
metadata: {
tags: { elemMatch: { contentful_id: { eq: "numberDecimal" } } }
}
node_locale: { eq: "en-US" }
}
) {
nodes {
title
decimal
}
}
}
`
96 changes: 87 additions & 9 deletions packages/gatsby-source-contentful/README.md
@@ -1,11 +1,42 @@
# gatsby-source-contentful

Source plugin for pulling content types, entries, and assets into Gatsby from
Contentful spaces. It creates links between entry types and asset so they can be
queried in Gatsby using GraphQL.

An example site for using this plugin is at
https://using-contentful.gatsbyjs.org/
> Source plugin for pulling content types, entries, and assets into Gatsby from
> Contentful spaces. It creates links between entry types and asset so they can be
> queried in Gatsby using GraphQL.
>
> An example site for using this plugin is at https://using-contentful.gatsbyjs.org/
<details>
<summary><strong>Table of contents</strong></summary>

- [gatsby-source-contentful](#gatsby-source-contentful)
- [Install](#install)
- [How to use](#how-to-use)
- [Restrictions and limitations](#restrictions-and-limitations)
- [Using Delivery API](#using-delivery-api)
- [Using Preview API](#using-preview-api)
- [Offline](#offline)
- [Configuration options](#configuration-options)
- [How to query for nodes](#how-to-query-for-nodes)
- [Query for all nodes](#query-for-all-nodes)
- [Query for a single node](#query-for-a-single-node)
- [A note about LongText fields](#a-note-about-longtext-fields)
- [Duplicated entries](#duplicated-entries)
- [Query for Assets in ContentType nodes](#query-for-assets-in-contenttype-nodes)
- [More on Queries with Contentful and Gatsby](#more-on-queries-with-contentful-and-gatsby)
- [Using the new Gatsby image plugin](#using-the-new-gatsby-image-plugin)
- [Contentful Tags](#contentful-tags)
- [List available tags](#list-available-tags)
- [Filter content by tags](#filter-content-by-tags)
- [Contentful Rich Text](#contentful-rich-text)
- [Query Rich Text content and references](#query-rich-text-content-and-references)
- [Rendering](#rendering)
- [Download assets for static distribution](#download-assets-for-static-distribution)
- [Enable the feature with the `downloadLocal: true` option.](#enable-the-feature-with-the-downloadlocal-true-option)
- [Updating Queries for downloadLocal](#updating-queries-for-downloadlocal)
- [Sourcing From Multiple Contentful Spaces](#sourcing-from-multiple-contentful-spaces)

</details>

## Install

Expand Down Expand Up @@ -136,6 +167,12 @@ Additional config which will get passed to [Contentfuls JS SDK](https://github.c

Use this with caution, you might override values this plugin does set for you to connect to Contentful.

**`enableTags`** [boolean][optional] [default: `false`]

Enable the new [tags feature](https://www.contentful.com/blog/2021/04/08/governance-tagging-metadata/). This will disallow the content type name `tags` till the next major version of this plugin.

Learn how to use them at the [Contentful Tags](#contentful-tags) section.

## How to query for nodes

Two standard node types are available from Contentful: `Asset` and `ContentType`.
Expand Down Expand Up @@ -298,6 +335,11 @@ To get **all** the `CaseStudy` nodes with `ShortText` fields `id`, `slug`, `titl

When querying images you can use the `fixed`, `fluid` or `resize` nodes to get different sizes for the image (for example for using [`gatsby-image`](https://www.gatsbyjs.org/packages/gatsby-image/)). Their usage is documented at the [`gatsby-plugin-sharp`](https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/) package. The only difference is that `gatsby-source-contentful` also allows setting only the `width` parameter for these node types, the height will then automatically be calculated according to the aspect ratio.

### More on Queries with Contentful and Gatsby

It is strongly recommended that you take a look at how data flows in a real Contentful and Gatsby application to fully understand how the queries, Node.js functions and React components all come together. Check out the example site at
[using-contentful.gatsbyjs.org](https://using-contentful.gatsbyjs.org/).

## Using the new Gatsby image plugin

You can now use the beta [gatsby-plugin-image](https://gatsbyjs.com/plugins/gatsby-plugin-image/) to display high-performance, responsive images from Contentful. This plugin is the replacement for gatsby-image, and is currently in beta, but can help deliver improved performance, with a cleaner API. Support in gatsby-source-contentful is still experimental.
Expand Down Expand Up @@ -336,10 +378,46 @@ module.exports = {
}
```

## More on Queries with Contentful and Gatsby
## [Contentful Tags](https://www.contentful.com/developers/docs/references/content-delivery-api/#/reference/content-tags)

It is strongly recommended that you take a look at how data flows in a real Contentful and Gatsby application to fully understand how the queries, Node.js functions and React components all come together. Check out the example site at
[using-contentful.gatsbyjs.org](https://using-contentful.gatsbyjs.org/).
You need to set the `enableTags` flag to `true` to use this new feature.

### List available tags

This example lists all available tags. The sorting is optional.

```graphql
query TagsQuery {
allContentfulTag(sort: { fields: contentful_id }) {
nodes {
name
contentful_id
}
}
}
```

### Filter content by tags

This filters content entries that are tagged with the `numberInteger` tag.

```graphql
query FilterByTagsQuery {
allContentfulNumber(
sort: { fields: contentful_id }
filter: {
metadata: {
tags: { elemMatch: { contentful_id: { eq: "numberInteger" } } }
}
}
) {
nodes {
title
integer
}
}
}
```

## [Contentful Rich Text](https://www.contentful.com/developers/docs/concepts/rich-text/)

Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-source-contentful/package.json
Expand Up @@ -8,14 +8,14 @@
},
"dependencies": {
"@babel/runtime": "^7.14.6",
"@contentful/rich-text-react-renderer": "^14.1.2",
"@contentful/rich-text-react-renderer": "^14.1.3",
"@contentful/rich-text-types": "^14.1.2",
"@hapi/joi": "^15.1.1",
"@vercel/fetch-retry": "^5.0.3",
"axios": "^0.21.1",
"chalk": "^4.1.1",
"common-tags": "^1.8.0",
"contentful": "^8.1.7",
"contentful": "^8.4.0",
"fs-extra": "^9.1.0",
"gatsby-core-utils": "^2.10.0-next.1",
"gatsby-plugin-utils": "^1.10.0-next.1",
Expand Down
Expand Up @@ -74,5 +74,6 @@ exports.initialSync = () => {
},
],
},
tagItems: [],
}
}
Expand Up @@ -789,6 +789,7 @@ exports.initialSync = () => {
},
],
},
tagItems: [],
}
}
exports.deleteLinkedPage = () => {
Expand Down Expand Up @@ -922,5 +923,6 @@ exports.deleteLinkedPage = () => {
},
],
},
tagItems: [],
}
}
Expand Up @@ -694,6 +694,7 @@ exports.initialSync = () => {
},
],
},
tagItems: [],
}
}

Expand Down Expand Up @@ -1083,6 +1084,7 @@ exports.createBlogPost = () => {
},
],
},
tagItems: [],
}
}

Expand Down Expand Up @@ -1434,6 +1436,7 @@ exports.updateBlogPost = () => {
},
],
},
tagItems: [],
}
}

Expand Down Expand Up @@ -1747,6 +1750,7 @@ exports.removeBlogPost = () => {
},
],
},
tagItems: [],
}
}

Expand Down Expand Up @@ -2060,5 +2064,6 @@ exports.removeAsset = () => {
},
],
},
tagItems: [],
}
}

0 comments on commit 15b49b6

Please sign in to comment.