feat(basic-starter): fix jsonapi params to work with vanilla drupal

chapter-three · Jul 27, 2022 · 258019f · 258019f
1 parent 7a91e3c
commit 258019f
Show file tree

Hide file tree

Showing 8 changed files with 68 additions and 15 deletions.
diff --git a/starters/basic-starter/.env.example b/starters/basic-starter/.env.example
@@ -1,3 +1,3 @@
 # See https://next-drupal.org/docs/environment-variables
-NEXT_PUBLIC_DRUPAL_BASE_URL=https://cms.next-drupal.org
-NEXT_IMAGE_DOMAIN=cms.next-drupal.org
+NEXT_PUBLIC_DRUPAL_BASE_URL=https://example.com
+NEXT_IMAGE_DOMAIN=example.com
diff --git a/starters/basic-starter/components/layout.tsx b/starters/basic-starter/components/layout.tsx
@@ -14,6 +14,11 @@ export function Layout({ children }) {
                 Next.js for Drupal
               </a>
             </Link>
+            <Link href="https://next-drupal.org/docs" passHref>
+              <a target="_blank" rel="external" className="hover:text-blue-600">
+                Read the docs
+              </a>
+            </Link>
           </div>
         </header>
         <main className="container py-10 mx-auto">{children}</main>

diff --git a/starters/basic-starter/components/node--article--teaser.tsx b/starters/basic-starter/components/node--article--teaser.tsx
@@ -25,15 +25,15 @@ export function NodeArticleTeaser({ node, ...props }: NodeArticleTeaserProps) {
         ) : null}
         <span> - {formatDate(node.created)}</span>
       </div>
-      {node.field_media_image?.field_media_image && (
+      {node.field_image && (
         <figure className="my-4">
           <Image
-            src={absoluteUrl(node.field_media_image.field_media_image.uri.url)}
+            src={absoluteUrl(node.field_image.uri.url)}
             width={768}
             height={480}
             layout="responsive"
             objectFit="cover"
-            alt={node.field_media_image.field_media_image.resourceIdObjMeta.alt}
+            alt={node.field_image.resourceIdObjMeta.alt}
           />
         </figure>
       )}

diff --git a/starters/basic-starter/components/node--article.tsx b/starters/basic-starter/components/node--article.tsx
@@ -20,19 +20,20 @@ export function NodeArticle({ node, ...props }: NodeArticleProps) {
         ) : null}
         <span> - {formatDate(node.created)}</span>
       </div>
-      {node.field_media_image.field_media_image && (
+      {node.field_image && (
         <figure>
           <Image
-            src={absoluteUrl(node.field_media_image.field_media_image.uri.url)}
+            src={absoluteUrl(node.field_image.uri.url)}
             width={768}
             height={400}
             layout="responsive"
             objectFit="cover"
-            alt={node.field_media_image.field_media_image.resourceIdObjMeta.alt}
+            alt={node.field_image.resourceIdObjMeta.alt}
+            priority
           />
-          {node.field_media_image.field_media_image.resourceIdObjMeta.title && (
+          {node.field_image.resourceIdObjMeta.title && (
             <figcaption className="py-2 text-sm text-center text-gray-600">
-              {node.field_media_image.field_media_image.resourceIdObjMeta.title}
+              {node.field_image.resourceIdObjMeta.title}
             </figcaption>
           )}
         </figure>

diff --git a/starters/basic-starter/package.json b/starters/basic-starter/package.json
@@ -15,7 +15,8 @@
     "next": "^12.1.4",
     "next-drupal": "^1.4.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "sharp": "^0.30.7"
   },
   "devDependencies": {
     "@types/node": "^17.0.23",

diff --git a/starters/basic-starter/pages/[...slug].tsx b/starters/basic-starter/pages/[...slug].tsx
@@ -52,7 +52,7 @@ export async function getStaticProps(
   let params = {}
   if (type === "node--article") {
     params = {
-      include: "field_media_image.field_media_image,uid",
+      include: "field_image,uid",
     }
   }
 

diff --git a/starters/basic-starter/pages/index.tsx b/starters/basic-starter/pages/index.tsx
@@ -46,8 +46,8 @@ export async function getStaticProps(
     {
       params: {
         "filter[status]": 1,
-        "fields[node--article]": "title,path,field_media_image,uid,created",
-        include: "field_media_image.field_media_image,uid",
+        "fields[node--article]": "title,path,field_image,uid,created",
+        include: "field_image,uid",
         sort: "-created",
       },
     }

diff --git a/yarn.lock b/yarn.lock
@@ -3053,21 +3053,35 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@17.0.2", "@types/react@^17.0.0", "@types/react@^17.0.43":
+"@types/react@*", "@types/react@17.0.2", "@types/react@^17.0.0":
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
   integrity sha512-Xt40xQsrkdvjn1EyWe1Bc0dJLcil/9x2vAuW7ya+PuQip4UYUaXyhzWmAbwRsdMgwOFHpfp7/FFZebDU6Y8VHA==
   dependencies:
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
+"@types/react@^17.0.43":
+  version "17.0.47"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78"
+  integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
   integrity sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==
   dependencies:
     "@types/node" "*"
 
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
 "@types/sinonjs__fake-timers@8.1.1":
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3"
@@ -10757,6 +10771,24 @@ prebuild-install@^7.1.0:
     tar-fs "^2.0.0"
     tunnel-agent "^0.6.0"
 
+prebuild-install@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
+  integrity sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==
+  dependencies:
+    detect-libc "^2.0.0"
+    expand-template "^2.0.3"
+    github-from-package "0.0.0"
+    minimist "^1.2.3"
+    mkdirp-classic "^0.5.3"
+    napi-build-utils "^1.0.1"
+    node-abi "^3.3.0"
+    pump "^3.0.0"
+    rc "^1.2.7"
+    simple-get "^4.0.0"
+    tar-fs "^2.0.0"
+    tunnel-agent "^0.6.0"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -11902,6 +11934,20 @@ sharp@^0.30.4:
     tar-fs "^2.1.1"
     tunnel-agent "^0.6.0"
 
+sharp@^0.30.7:
+  version "0.30.7"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.30.7.tgz#7862bda98804fdd1f0d5659c85e3324b90d94c7c"
+  integrity sha512-G+MY2YW33jgflKPTXXptVO28HvNOo9G3j0MybYAHeEmby+QuD2U98dT6ueht9cv/XDqZspSpIhoSW+BAKJ7Hig==
+  dependencies:
+    color "^4.2.3"
+    detect-libc "^2.0.1"
+    node-addon-api "^5.0.0"
+    prebuild-install "^7.1.1"
+    semver "^7.3.7"
+    simple-get "^4.0.1"
+    tar-fs "^2.1.1"
+    tunnel-agent "^0.6.0"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"