N00b's Programming Machine

    @cmpsr/contentful-core
    TypeScript icon, indicating that this package has built-in type declarations

    0.5.2 • Public • Published

    contentful-core

    Base Composer components for standing up a React/NextJS app that can dynamically render components based on Contentful Model types mapped to components and queries.

    Install

    Via npm:

    npm i --save @cmpsr/contentful-core

    Via Yarn:

    yarn add @cmpsr/contentful-core

    How to use

    Required .env variables

    CONTENTFUL_PREVIEW={true|false}
    CONTENTFUL_SPACE_ID={Contentful space ID}
    CONTENTFUL_ENVIRONMENT={Contentful environment} (defaults to `master`)
    CONTENTFUL_ACCESS_TOKEN_DELIVERY={Contentful Delivery Token}
    CONTENTFUL_ACCESS_TOKEN_PREVIEW={Contentful Preview Token}
    CONTENTFUL_ACCESS_TOKEN={Contentful token used by scripts to generate schema/types}
    

    ContentfulProvider

    ComponentRenderer

    ComponentRenedererWithContext

    ComponentRendererWithQuery

    Utility Scripts

    The utility scripts make it easy to generate GraphQL schemas and the associated Typescript definitions for your Contentful setup.

    Required script environment variables

    CONTENTFUL_SPACE_ID - The Contentful Space ID. CONTENTFUL_ACCESS_TOKEN - The Contentful API access token. This could be the Delivery or Preview API access token, depending on your needs.

    Generate Schema

    Within your project directory, run the following command to generate the fragmentTypes.json based on your Contentful models.

    node ./node_modules/@cmpsr/contentful-core/scripts/graphql-schema.js

    Environment Variables

    SCHEMA_DIR - Directory to write the fragmentsTypes.json to. Defaults to: ./src/schema

    Generate Types

    Within your project directory, run the following command to generate the fragmentTypes.json based on your Contentful models.

    node ./node_modules/@cmpsr/contentful-core/scripts/graphql-types.js

    Environment Variables

    TYPES_DIR - Directory to write the types files to. Defaults to: ./src/types GLOBAL_TYPES_FILE - Path and name for the global types files. Defaults to: ./src/types/global.ts

    Add to package.json

    {
      "scripts": {
        ...
        "graphql:schema": "node ./node_modules/@cmpsr/contentful-core/scripts/graphql-schema.js",
        "graphql:types": "node ./node_modules/@cmpsr/contentful-core/scripts/graphql-types.js",
        "graphql:possibleTypes": "node ./node_modules/@cmpsr/contentful-core/scripts/graphql-possibleTypes.js"
      }
    }

    Examples

    NextJS

    1. Define Apollo Client

    lib/apollo.js - createContetnfulLink - GraphQL Version

    import { ApolloClient, InMemoryCache } from "@apollo/client";
    import { withApollo } from "next-apollo";
    import { createContentfulLink } from "@cmpsr/contentful-core/lib/client";
    import possibleTypes from "types/possibleTypes.json";
    
    const apolloClient = new ApolloClient({
      link: createContentfulLink({
        space: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN_DELIVERY
      }),
      cache: new InMemoryCache({ possibleTypes })
    });
    
    export default withApollo(apolloClient);

    lib/apollo.js - ContentfulRestLink - GraphQL Queries + REST API Version

    import { ApolloClient, InMemoryCache } from "@apollo/client";
    import { withApollo } from "next-apollo";
    import { ContentfulRestLink } from "@cmpsr/contentful-core/lib/client";
    import possibleTypes from "types/possibleTypes.json";
    
    const apolloClient = new ApolloClient({
      link: new ContentfulRestLink({
        space: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN_DELIVERY
      }),
      cache: new InMemoryCache({ possibleTypes })
    });
    
    export default withApollo(apolloClient);

    2. Wrap Next App (or Page(s))

    pages/_app.js

    import React from "react";
    import withApollo from "lib/apollo";
    
    const MyApp = ({ Component, pageProps }) => <Component {...pageProps} />;
    
    export default withApollo({ ssr: true })(MyApp);

    pages/index.js

    import React from 'react'
    import withApollo from 'lib/apollo'
    
    const Home = props => {
      ...
    };
    
    export default withApollo({ ssr: true })(Home);

    React App

    Coming soon...

    Keywords

    none

    Install

    npm i @cmpsr/contentful-core

    DownloadsWeekly Downloads

    2,127

    Version

    0.5.2

    License

    MIT

    Unpacked Size

    71.1 kB

    Total Files

    83

    Last publish

    Collaborators

    • stevejcox
    • tkanzakic
    • ryanhefner