From f6480bb3493b9ef891fdb566ed12e2d8a7f3b6c6 Mon Sep 17 00:00:00 2001 From: ryunsong-contentful Date: Wed, 15 Jan 2025 13:33:45 -0700 Subject: [PATCH] fix: react-router import in gatsby spa to match the docs --- examples/gatsby/gatsby-spa/gatsby-browser.tsx | 18 ---- examples/gatsby/gatsby-spa/package-lock.json | 82 +------------------ examples/gatsby/gatsby-spa/package.json | 3 +- .../src/pages/StudioExperiencePage.tsx | 26 ------ .../gatsby-spa/src/pages/[locale]/[slug].tsx | 30 +++++++ .../src/utils/useContentfulClient.ts | 9 +- 6 files changed, 36 insertions(+), 132 deletions(-) delete mode 100644 examples/gatsby/gatsby-spa/gatsby-browser.tsx delete mode 100644 examples/gatsby/gatsby-spa/src/pages/StudioExperiencePage.tsx create mode 100644 examples/gatsby/gatsby-spa/src/pages/[locale]/[slug].tsx diff --git a/examples/gatsby/gatsby-spa/gatsby-browser.tsx b/examples/gatsby/gatsby-spa/gatsby-browser.tsx deleted file mode 100644 index ee5e1b99c..000000000 --- a/examples/gatsby/gatsby-spa/gatsby-browser.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { BrowserRouter, Routes, Route } from 'react-router'; -import StudioExperiencePage from './src/pages/StudioExperiencePage'; -import Index from './src/pages/index'; - -export const wrapRootElement = () => { - return ( - - - } /> - } /> - {/* Add more routes here to connect more components to Experiences */} - {/* } /> */} - {/* } /> */} - - - ); -}; diff --git a/examples/gatsby/gatsby-spa/package-lock.json b/examples/gatsby/gatsby-spa/package-lock.json index 94da9ab6b..5f252e73f 100644 --- a/examples/gatsby/gatsby-spa/package-lock.json +++ b/examples/gatsby/gatsby-spa/package-lock.json @@ -13,8 +13,7 @@ "gatsby": "^5.14.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-markdown": "^9.0.3", - "react-router": "^7.1.1" + "react-markdown": "^9.0.3" }, "devDependencies": { "@types/node": "^20.11.19", @@ -15250,42 +15249,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-router": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", - "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", - "dependencies": { - "@types/cookie": "^0.6.0", - "cookie": "^1.0.1", - "set-cookie-parser": "^2.6.0", - "turbo-stream": "2.4.0" - }, - "engines": { - "node": ">=20.0.0" - }, - "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - } - } - }, - "node_modules/react-router/node_modules/@types/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" - }, - "node_modules/react-router/node_modules/cookie": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", - "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", - "engines": { - "node": ">=18" - } - }, "node_modules/react-server-dom-webpack": { "version": "0.0.0-experimental-c8b778b7f-20220825", "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-c8b778b7f-20220825.tgz", @@ -16031,11 +15994,6 @@ "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==" }, - "node_modules/set-cookie-parser": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", - "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" - }, "node_modules/set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -17246,11 +17204,6 @@ "node": "*" } }, - "node_modules/turbo-stream": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", - "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" - }, "node_modules/type": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", @@ -29005,29 +28958,6 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==" }, - "react-router": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.1.tgz", - "integrity": "sha512-39sXJkftkKWRZ2oJtHhCxmoCrBCULr/HAH4IT5DHlgu/Q0FCPV0S4Lx+abjDTx/74xoZzNYDYbOZWlJjruyuDQ==", - "requires": { - "@types/cookie": "^0.6.0", - "cookie": "^1.0.1", - "set-cookie-parser": "^2.6.0", - "turbo-stream": "2.4.0" - }, - "dependencies": { - "@types/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==" - }, - "cookie": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz", - "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==" - } - } - }, "react-server-dom-webpack": { "version": "0.0.0-experimental-c8b778b7f-20220825", "resolved": "https://registry.npmjs.org/react-server-dom-webpack/-/react-server-dom-webpack-0.0.0-experimental-c8b778b7f-20220825.tgz", @@ -29588,11 +29518,6 @@ "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz", "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==" }, - "set-cookie-parser": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", - "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==" - }, "set-function-length": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", @@ -30480,11 +30405,6 @@ "safe-buffer": "^5.0.1" } }, - "turbo-stream": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", - "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==" - }, "type": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", diff --git a/examples/gatsby/gatsby-spa/package.json b/examples/gatsby/gatsby-spa/package.json index e8981dc0d..9722b8ae2 100644 --- a/examples/gatsby/gatsby-spa/package.json +++ b/examples/gatsby/gatsby-spa/package.json @@ -21,8 +21,7 @@ "gatsby": "^5.14.1", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-markdown": "^9.0.3", - "react-router": "^7.1.1" + "react-markdown": "^9.0.3" }, "devDependencies": { "@types/node": "^20.11.19", diff --git a/examples/gatsby/gatsby-spa/src/pages/StudioExperiencePage.tsx b/examples/gatsby/gatsby-spa/src/pages/StudioExperiencePage.tsx deleted file mode 100644 index 8eb438fc2..000000000 --- a/examples/gatsby/gatsby-spa/src/pages/StudioExperiencePage.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import { useParams } from 'react-router'; -import { ExperienceRoot, useFetchBySlug } from '@contentful/experiences-sdk-react'; -import { useContentfulClient } from '../utils/useContentfulClient'; - -type PathParams = { localeCode: string; slug: string }; - -const experienceTypeId = process.env.GATSBY_CTFL_EXPERIENCE_TYPE || ''; - -export default function StudioExperiencePage() { - const { localeCode = 'en-US', slug = 'StudioExperiencePage' } = useParams(); - - const { client } = useContentfulClient(); - - const { experience, error, isLoading } = useFetchBySlug({ - slug, - localeCode, - client, - experienceTypeId, - }); - - if (isLoading) return
Loading...
; - if (error) return
{error.message}
; - - return ; -} diff --git a/examples/gatsby/gatsby-spa/src/pages/[locale]/[slug].tsx b/examples/gatsby/gatsby-spa/src/pages/[locale]/[slug].tsx new file mode 100644 index 000000000..6c3006e5a --- /dev/null +++ b/examples/gatsby/gatsby-spa/src/pages/[locale]/[slug].tsx @@ -0,0 +1,30 @@ +import { useFetchBySlug, ExperienceRoot } from '@contentful/experiences-sdk-react'; +import { PageProps } from 'gatsby'; +import React from 'react'; +import { useContentfulClient } from '../../utils/useContentfulClient'; + +type PathParams = { + locale: string; + slug: string, + isPreviewString: string; +}; + +const experienceTypeId = process.env.GATSBY_CTFL_EXPERIENCE_TYPE || ''; + +export default function StudioExperiencePage(pageProps: PageProps) { + const { locale = 'en-US', slug = 'home-page', } = pageProps.params as PathParams; + const isPreview = new URL(pageProps.location.href).searchParams.get('isPreview') === 'true'; + const { client } = useContentfulClient({ isPreview }); + + const { experience, error, isLoading } = useFetchBySlug({ + slug, + localeCode: locale, + client, + experienceTypeId, + }); + + if (isLoading) return
Loading...
; + if (error) return
{error.message}
; + + return ; +} \ No newline at end of file diff --git a/examples/gatsby/gatsby-spa/src/utils/useContentfulClient.ts b/examples/gatsby/gatsby-spa/src/utils/useContentfulClient.ts index 254142a0a..cb20d0e01 100644 --- a/examples/gatsby/gatsby-spa/src/utils/useContentfulClient.ts +++ b/examples/gatsby/gatsby-spa/src/utils/useContentfulClient.ts @@ -1,13 +1,12 @@ import { useMemo } from 'react'; import { createClient } from 'contentful'; -import { useLocation } from 'react-router'; import '../studio-config'; // Update this file to set breakpoints, design tokens, and register components -export const useContentfulClient = () => { - const location = useLocation(); - const queryParams = new URLSearchParams(location.search); - const isPreview = queryParams.get('isPreview') === 'true'; +type Props = { + isPreview?: boolean; +} +export const useContentfulClient = ({isPreview}: Props) => { const client = useMemo(() => { const clientConfig = { space: process.env.GATSBY_CTFL_SPACE || '',