[1.0] [gatsby-source-contentful] WIP support creating localized nodes (…

…#1279)

* Make functions for fetching localized field + to make IDs

* First draft on localiziing nodes

* Add explaination for localization algorithm

* This was unnecessary

* Terminate comment

* update snapshots

* Add to demo site explanation/demo of localization

* Fix bug with creating links for reverse references

* Update README

examples/using-contentful/src/pages/image-api.js

@@ -2,7 +2,6 @@ import React from "react"
 import { rhythm } from "../utils/typography"
 
 export default props => {
- console.log(props)
  const assets = props.data.allContentfulAsset.edges
  return (
  <div>
@@ -221,7 +220,7 @@ export default props => {
 
 export const pageQuery = graphql`
  query ImageAPIExamples {
- allContentfulAsset {
+ allContentfulAsset(filter: { node_locale: { eq: "en-US" } }) {
  edges {
  node {
  title

examples/using-contentful/src/pages/index.js

@@ -7,52 +7,67 @@ const propTypes = {
  data: PropTypes.object.isRequired,
 }
 
+const Product = ({ node }) =>
+ <div key={node.id}>
+ <Link
+ style={{ color: `inherit`, textDecoration: `none` }}
+ to={`/products/${node.id}/`}
+ >
+ <div
+ style={{
+ display: `flex`,
+ alignItems: `center`,
+ borderBottom: `1px solid lightgray`,
+ paddingBottom: rhythm(1 / 2),
+ marginBottom: rhythm(1 / 2),
+ }}
+ >
+ <div style={{ marginRight: rhythm(1 / 2) }}>
+ {node.image[0].responsiveResolution.src &&
+ <img
+ style={{ margin: 0 }}
+ width={node.image[0].responsiveResolution.width}
+ height={node.image[0].responsiveResolution.height}
+ src={node.image[0].responsiveResolution.src}
+ srcSet={node.image[0].responsiveResolution.srcSet}
+ />}
+ </div>
+ <div style={{ flex: 1 }}>
+ {node.productName.productName}
+ </div>
+ </div>
+ </Link>
+ </div>
+
 class IndexPage extends React.Component {
  render() {
- const productEdges = this.props.data.allContentfulProduct.edges
+ const usProductEdges = this.props.data.us.edges
+ const deProductEdges = this.props.data.german.edges
  return (
  <div style={{ marginBottom: rhythm(2) }}>
- <h1>Gatsby's integration with the Contentful Image API</h1>
+ <h2>Gatsby's integration with the Contentful Image API</h2>
  <Link to="/image-api/">See examples</Link>
  <br />
  <br />
  <br />
- <h1>Products</h1>
- {productEdges.map((productEdge, i) => {
- const product = productEdge.node
- return (
- <div key={product.id}>
- <Link
- style={{ color: `inherit`, textDecoration: `none` }}
- to={`/products/${product.id}/`}
- >
- <div
- style={{
- display: `flex`,
- alignItems: `center`,
- borderBottom: `1px solid lightgray`,
- paddingBottom: rhythm(1 / 2),
- marginBottom: rhythm(1 / 2),
- }}
- >
- <div style={{ marginRight: rhythm(1 / 2) }}>
- {product.image[0].responsiveResolution.src &&
- <img
- style={{ margin: 0 }}
- width={product.image[0].responsiveResolution.width}
- height={product.image[0].responsiveResolution.height}
- src={product.image[0].responsiveResolution.src}
- srcSet={product.image[0].responsiveResolution.srcSet}
- />}
- </div>
- <div style={{ flex: 1 }}>
- {product.productName.productName}
- </div>
- </div>
- </Link>
- </div>
- )
- })}
+ <h2>Localization</h2>
+ <p>
+ The <code>gatsby-source-contentful</code> plugin offers full support
+ for Contentful's localization features. Our sample space includes
+ products localized into both English and German.
+ </p>
+ <p>
+ An entry and asset node are created for each locale following fallback
+ rules for missing localization. In addition, each node has an
+ additional field added, <code>node_locale</code> so you can select for
+ nodes from a single locale
+ </p>
+ <h3>en-US</h3>
+ {usProductEdges.map(({ node }, i) => <Product node={node} />)}
+ <br />
+ <br />
+ <h3>de</h3>
+ {deProductEdges.map(({ node }, i) => <Product node={node} />)}
  </div>
  )
  }
@@ -64,7 +79,25 @@ export default IndexPage
 
 export const pageQuery = graphql`
  query PageQuery {
- allContentfulProduct {
+ us: allContentfulProduct(filter: { node_locale: { eq: "en-US" } }) {
+ edges {
+ node {
+ id
+ productName {
+ productName
+ }
+ image {
+ responsiveResolution(width: 75) {
+ src
+ srcSet
+ height
+ width
+ }
+ }
+ }
+ }
+ }
+ german: allContentfulProduct(filter: { node_locale: { eq: "de" } }) {
  edges {
  node {
  id

packages/gatsby-source-contentful/README.md

@@ -1,21 +1,10 @@
 # gatsby-source-contentful
 
-Source plugin for pulling data into Gatsby from Contentful spaces.
-
-Pulls data from Contentful spaces with the [Contentful API](https://www.contentful.com/developers/docs/).
+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://gatsby-using-contentful.netlify.com/
 
-## Status
-
-This module is at prototype-level.
-It pulls Contentful ContentTypes, all entry types, and Assets. Then, it finds and links entry types with any other entry type or asset so they can be referenced together inside Gatsby via GraphQL.
-
-Future improvements can include:
-
-- Using Contentful's [sync functionality](https://www.contentful.com/developers/docs/concepts/sync/) to only get and update in Gatsby the delta of its CMS changes
-
 ## Install
 
 `npm install --save gatsby-source-contentful`
@@ -37,7 +26,7 @@ plugins: [
 
 ## How to query
 
-Two standard data types will be available pulled from Contentful: ContentType and Asset.
+Two standard data types will be available from Contentful: `ContentType` and `Asset`.
 
 You can query Asset nodes created from Contentful like the following:
 
@@ -56,7 +45,11 @@ You can query Asset nodes created from Contentful like the following:
 }
 ```
 
-Non-standard data types e.g. entry types you create in Contentful will also be available as Gatsby nodes. You should find them in GraphQL schema under `contentful${entryTypeName}` and `allContentful${entryTypeName}`. For example, if you have a Product as one of your types, you may be able to query it like the following:
+Non-standard data types, i.e. entry types you define in Contentful, will also
+be available in Gatsby. They'll be created in your site's GraphQL schema under
+`contentful${entryTypeName}` and `allContentful${entryTypeName}`. For example,
+if you have `Product` as one of your content types, you will be able to query
+it like the following:
 
 ```graphql
 allContentfulProduct {
@@ -65,8 +58,11 @@ allContentfulProduct {
  id
  productName
  image {
- file {
- url
+ responsiveResolution(width: 100) {
+ width
+ height
+ src
+ srcSet
  }
  }
  }