Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@cmpsr/contentful-core
Advanced tools
@cmpsr/contentful-core - npm Package Compare versions
Comparing version 1.0.0-canary-20231120111113 to 1.0.0-canary-20231120132554
@@ -12,3 +12,2 @@ "use strict"; | ||
| var _client = require("@apollo/client"); | ||
| var _crossfetch = /*#__PURE__*/ _interop_require_default(require("cross-fetch")); | ||
| function _define_property(obj, key, value) { | ||
@@ -27,7 +26,2 @@ if (key in obj) { | ||
| } | ||
| function _interop_require_default(obj) { | ||
| return obj && obj.__esModule ? obj : { | ||
| default: obj | ||
| }; | ||
| } | ||
| function _object_spread(target) { | ||
@@ -85,5 +79,4 @@ for(var i = 1; i < arguments.length; i++){ | ||
| }), | ||
| fetch: _crossfetch.default, | ||
| uri: uri | ||
| }); | ||
| }; |
| { | ||
| "name": "@cmpsr/contentful-core", | ||
| "version": "1.0.0-canary-20231120111113", | ||
| "version": "1.0.0-canary-20231120132554", | ||
| "description": "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.", | ||
@@ -9,6 +9,2 @@ "author": "Ryan Hefner <hi@ryanhefner.com>", | ||
| "main": "lib/index.js", | ||
| "directories": { | ||
| "lib": "lib", | ||
| "scripts": "scripts" | ||
| }, | ||
| "files": [ | ||
@@ -42,10 +38,6 @@ "lib", | ||
| }, | ||
| "dependencies": { | ||
| "cross-fetch": "^3.1.4" | ||
| }, | ||
| "devDependencies": { | ||
| "@apollo/client": "^3.4.8", | ||
| "dotenv": "^10.0.0", | ||
| "@apollo/client": "^3.6.2", | ||
| "graphql": "^15.5.1" | ||
| } | ||
| } |
154
README.md
| # 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. | ||
| A utility package providing the `createContentfulLink` method for setting up a link with Apollo Client in React/Next.js applications using Contentful. | ||
| ## Install | ||
| Via [npm](https://npmjs.com/package/@cmpsr/contentful-core): | ||
| Install the package using Yarn: | ||
| ```sh | ||
| npm i --save @cmpsr/contentful-core | ||
| ``` | ||
| Via [Yarn](https://yarn.fyi/@cmpsr/contentful-core): | ||
| ```sh | ||
| yarn add @cmpsr/contentful-core | ||
| ``` | ||
| ## How to use | ||
| ## Usage | ||
| ### Required `.env` variables | ||
| ### `createContentfulLink` | ||
| ``` | ||
| 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} | ||
| ``` | ||
| This method creates an Apollo Client `HttpLink` for connecting to Contentful's GraphQL API. | ||
| ### `ContentfulProvider` | ||
| Here's how to use `createContentfulLink` to configure Apollo Client in a Next.js application: | ||
| ```js | ||
| ``` | ||
| ### `ComponentRenderer` | ||
| ```js | ||
| ``` | ||
| ### `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. | ||
| ```sh | ||
| 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. | ||
| ```sh | ||
| 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`** | ||
| ```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 | ||
| ```js | ||
| ```javascript | ||
| 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"; | ||
| import { createContentfulLink } from "@cmpsr/contentful-core"; | ||
@@ -111,57 +28,8 @@ const apolloClient = new ApolloClient({ | ||
| space: process.env.CONTENTFUL_SPACE_ID, | ||
| accessToken: process.env.CONTENTFUL_ACCESS_TOKEN_DELIVERY | ||
| accessToken: process.env.CONTENTFUL_ACCESS_TOKEN_DELIVERY, | ||
| }), | ||
| cache: new InMemoryCache({ possibleTypes }) | ||
| cache: new InMemoryCache(), | ||
| }); | ||
| export default withApollo(apolloClient); | ||
| export default apolloClient; | ||
| ``` | ||
| `lib/apollo.js` - `ContentfulRestLink` - GraphQL Queries + REST API Version | ||
| ```js | ||
| 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` | ||
| ```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` | ||
| ```js | ||
| import React from 'react' | ||
| import withApollo from 'lib/apollo' | ||
| const Home = props => { | ||
| ... | ||
| }; | ||
| export default withApollo({ ssr: true })(Home); | ||
| ``` | ||
| ### React App | ||
| _Coming soon..._ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dependency count
- decreased by-33.33%
2
- Dev dependency count
- decreased by-33.33%
2
Worsened metrics
- Total package byte prevSize
- decreased by-35.94%
6548
- Lines of code
- decreased by-5.51%
120
- Number of lines in readme file
- decreased by-79.04%
35
Dependency changes
- Removedcross-fetch@^3.1.4
- Removedcross-fetch@3.2.0(transitive)
- Removednode-fetch@2.7.0(transitive)
- Removedtr46@0.0.3(transitive)
- Removedwebidl-conversions@3.0.1(transitive)
- Removedwhatwg-url@5.0.0(transitive)