react-contentful-update v1.4.6-sai

📰 react-contentful-update

A React component library that makes it super simple to compose Contentful content into your sites and applications.

Install

Via npm

npm install react-contentful-update

Via Yarn

yarn add react-contentful-update

Why this package is created

This is a modify version of react-contentful to be able use only query in <Query /> component which I've made pull request but still pending so for the use of urgent case in my project I uploaded to npm. This is necessary in getting mutiple content types .I gave full credit to react-contenful.

Query

In this example, the Query component accepts a query parameter that filters Page content types from Contentful based on the slug field set on published Page content models.

import React from 'react';
import { Query } from 'react-contentful';

const Page = (props) => (
  <Query
    contentType="Page"
    query={{
      'fields.slug[in]': `/${props.match.slug || ''}`,
    }}
  >
    {({data, error, fetched, loading}) => {
      if (loading || !fetched) {
        return null;
      }

      if (error) {
        console.error(error);
        return null;
      }

      if (!data) {
        return <p>Page does not exist.</p>;
      }

      // See the Contentful query response
      console.debug(data);

      // Process and pass in the loaded `data` necessary for your page or child components.
      return (
        ...
      );
    }}
  </Query>
);

export default Page;

Query component with multiple content type

In this example, the Query component accepts a query parameter that accept query props to request mutliple content type.

import React from 'react';
import { Query } from 'react-contentful';

const Page = (props) => (
  <Query
    contentType="Page"
    query={{
      'sys.contentType.sys.id[in]': 'contentType-1,contentType-2',
    }}
  >
    {({data, error, fetched, loading}) => {
      if (loading || !fetched) {
        return null;
      }

      if (error) {
        console.error(error);
        return null;
      }

      if (!data) {
        return <p>Page does not exist.</p>;
      }

      // See the Contentful query response
      console.debug(data);

      // Process and pass in the loaded `data` necessary for your page or child components.
      return (
        ...
      );
    }}
  </Query>
);

export default Page;

Components

Below are the following components and classes that are availabe in this package that makes it easy to integrate Contentful into your site or application.

ContentfulProvider

Provider that offers accesss to a centralized ContentfulClient that not only can make all your Contentful requests, but also handles caching those requests during your session to keep things optimized and fast.

ContentfulClient

Instance of Contentful client that is for making requests and caching responses.

The ContentfulClient is an extension of the Contentful Delivery API SDK. For more information about what options are available when creating a client, along with other useful insights, check out the Official Contentful documentation.

ContentfulCache

Cache instance used for caching responses in memory during a session, along with building up a cache of responses for responses used to render/rehydrate the app when used during server-side rendering. You would typically not have to work with this class directly, unless you are rolling your own server-side rendering solution or have some ideas around warming the cache. Otherwise, you should check out next-contentful if you’re working on a React/Node/Express app.

Query

This is where the magic happens. You can compose Query wherever you need to reference or conditionally render content based on Contentful data. Querys can be used standalone, or to wrap content that is reliant on the data.

withContentful

Higher-order component that is available in case you want to build your own Contentful ready components. Used by the Query component for providing access to the ContentfulContext.

import { withContentful } from 'react-contentful';

const YourComponent = ({ contentful }) => {
  const { client, locale, renderPromises,  } = contentful;

  return (
    ...
  );
};

export default withContentful(YourComponent);

Using Next.js?

If you like what you see above, you might like next-contentful, which lets you easily add react-contentful to your Next.js app. Making it easy to ensure that all your Query instances render awesomely server-side.

License

MIT © Ryan Hefner