Skip to content

Commit 3561226

Browse files
JohnAlbinJohnAlbin
committed
feat: upgrade graphql-starter to Next.js v14
Issue #601
1 parent 13dac25 commit 3561226

27 files changed

+266
-211
lines changed

‎starters/graphql-starter/.env.example

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
# See https://next-drupal.org/docs/environment-variables
2-
NEXT_PUBLIC_DRUPAL_BASE_URL=https://dev.next-drupal.org
3-
NEXT_IMAGE_DOMAIN=dev.next-drupal.org
2+
3+
# Required
4+
NEXT_PUBLIC_DRUPAL_BASE_URL=https://site.example.com
5+
NEXT_IMAGE_DOMAIN=site.example.com
46

57
# Authentication
6-
DRUPAL_CLIENT_ID=
7-
DRUPAL_CLIENT_SECRET=
8+
DRUPAL_CLIENT_ID=Retrieve this from /admin/config/services/consumer
9+
DRUPAL_CLIENT_SECRET=Retrieve this from /admin/config/services/consumer
10+
11+
# Required for Preview Mode
12+
DRUPAL_PREVIEW_SECRET=Retrieve this from /admin/config/services/next
813

914
# Required for On-demand Revalidation
10-
DRUPAL_REVALIDATE_SECRET=secret
15+
DRUPAL_REVALIDATE_SECRET=Retrieve this from /admin/config/services/next

‎starters/graphql-starter/.eslintrc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"extends": "next",
2+
"extends": "next/core-web-vitals",
33
"root": true
44
}

‎starters/graphql-starter/.gitignore

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44
/node_modules
55
/.pnp
66
.pnp.js
7+
.yarn/install-state.gz
78

89
# testing
910
/coverage
1011

1112
# next.js
1213
/.next/
1314
/out/
14-
.next
1515

1616
# production
1717
/build
@@ -20,19 +20,21 @@
2020
.DS_Store
2121
*.pem
2222

23+
# IDE files
24+
/.idea
25+
/.vscode
26+
2327
# debug
2428
npm-debug.log*
2529
yarn-debug.log*
2630
yarn-error.log*
27-
lerna-debug.log*
2831

2932
# local env files
30-
.env.local
31-
.env.development.local
32-
.env.test.local
33-
.env.production.local
33+
.env*.local
3434

3535
# vercel
3636
.vercel
3737

38-
/certificates/*
38+
# typescript
39+
*.tsbuildinfo
40+
next-env.d.ts

‎starters/graphql-starter/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v20

‎starters/graphql-starter/.prettierignore

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Ignore everything.
2+
/*
3+
4+
# Format most files in the root directory.
5+
!/*.js
6+
!/*.ts
7+
!/*.md
8+
!/*.json
9+
# But ignore some.
10+
/package.json
11+
/package-lock.json
12+
/CHANGELOG.md
13+
14+
# Don't ignore these nested directories.
15+
!/app
16+
!/components
17+
!/lib
18+
!/pages

‎starters/graphql-starter/.prettierrc.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"semi": false,
3+
"trailingComma": "es5"
4+
}

‎starters/graphql-starter/components/layout.tsx renamed to ‎starters/graphql-starter/components/Layout.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import Link from "next/link"
2+
import { PreviewAlert } from "@/components/PreviewAlert"
3+
import type { ReactNode } from "react"
24

3-
import { PreviewAlert } from "components/preview-alert"
4-
5-
export function Layout({ children }) {
5+
export function Layout({ children }: { children: ReactNode }) {
66
return (
77
<>
88
<PreviewAlert />

‎starters/graphql-starter/components/PreviewAlert.tsx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useEffect, useState } from "react"
2+
import { useRouter } from "next/router"
3+
4+
export function PreviewAlert() {
5+
const router = useRouter()
6+
const isPreview = router.isPreview
7+
const [showPreviewAlert, setShowPreviewAlert] = useState<boolean>(false)
8+
9+
useEffect(() => {
10+
setShowPreviewAlert(isPreview && window.top === window.self)
11+
}, [isPreview])
12+
13+
if (!showPreviewAlert) {
14+
return null
15+
}
16+
17+
return (
18+
<div className="sticky top-0 left-0 z-50 w-full px-2 py-1 text-center text-white bg-black">
19+
<p className="mb-0">
20+
This page is a preview.{" "}
21+
<button
22+
className="inline-block ml-3 rounded border px-1.5 hover:bg-white hover:text-black active:bg-gray-200 active:text-gray-500"
23+
onClick={() => router.push("/api/exit-preview")}
24+
>
25+
Exit preview mode
26+
</button>
27+
</p>
28+
</div>
29+
)
30+
}

‎starters/graphql-starter/components/node--article.tsx renamed to ‎starters/graphql-starter/components/drupal/Article.tsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
import Image from "next/image"
2+
import { formatDate } from "@/lib/utils"
3+
import type { NodeArticle } from "@/types"
24

3-
import { formatDate } from "lib/utils"
4-
import { Article } from "types"
5-
6-
interface NodeArticleProps {
7-
node: Article
5+
interface ArticleProps {
6+
node: NodeArticle
87
}
98

10-
export function NodeArticle({ node, ...props }: NodeArticleProps) {
9+
export function Article({ node, ...props }: ArticleProps) {
1110
return (
1211
<article {...props}>
1312
<h1 className="mb-4 text-6xl font-black leading-tight">{node.title}</h1>
@@ -21,18 +20,19 @@ export function NodeArticle({ node, ...props }: NodeArticleProps) {
2120
<span> - {formatDate(node.created)}</span>
2221
</div>
2322
{node.image && (
24-
<figure className="my-4">
23+
<figure>
2524
<Image
2625
src={node.image.url}
2726
width={768}
28-
height={480}
29-
alt={node.title}
27+
height={400}
28+
alt=""
29+
priority
3030
/>
3131
</figure>
3232
)}
3333
{node.body?.processed && (
3434
<div
35-
dangerouslySetInnerHTML={{ __html: node.body.processed }}
35+
dangerouslySetInnerHTML={{ __html: node.body?.processed }}
3636
className="mt-6 font-serif text-xl leading-loose prose"
3737
/>
3838
)}

‎starters/graphql-starter/components/node--article--teaser.tsx renamed to ‎starters/graphql-starter/components/drupal/ArticleTeaser.tsx

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import Image from "next/image"
22
import Link from "next/link"
3+
import { formatDate } from "@/lib/utils"
4+
import type { NodeArticle } from "@/types"
35

4-
import { formatDate } from "lib/utils"
5-
import { Article } from "types"
6-
7-
interface NodeArticleTeaserProps {
8-
node: Partial<Article>
6+
interface ArticleTeaserProps {
7+
node: Partial<NodeArticle>
98
}
109

11-
export function NodeArticleTeaser({ node, ...props }: NodeArticleTeaserProps) {
10+
export function ArticleTeaser({ node, ...props }: ArticleTeaserProps) {
1211
return (
1312
<article {...props}>
14-
<Link href={node.path} className="no-underline hover:text-blue-600">
13+
<Link href={node.path || ""} className="no-underline hover:text-blue-600">
1514
<h2 className="mb-4 text-4xl font-bold">{node.title}</h2>
1615
</Link>
1716
<div className="mb-4 text-gray-600">
@@ -21,20 +20,15 @@ export function NodeArticleTeaser({ node, ...props }: NodeArticleTeaserProps) {
2120
<span className="font-semibold">{node.author.displayName}</span>
2221
</span>
2322
) : null}
24-
<span> - {formatDate(node.created)}</span>
23+
{node.created && <span> - {formatDate(node.created)}</span>}
2524
</div>
2625
{node.image && (
2726
<figure className="my-4">
28-
<Image
29-
src={node.image.url}
30-
width={768}
31-
height={480}
32-
alt={node.title}
33-
/>
27+
<Image src={node.image.url} width={768} height={480} alt="" />
3428
</figure>
3529
)}
3630
<Link
37-
href={node.path}
31+
href={node.path || ""}
3832
className="inline-flex items-center px-6 py-2 border border-gray-600 rounded-full hover:bg-gray-100"
3933
>
4034
Read article

‎starters/graphql-starter/components/node--basic-page.tsx renamed to ‎starters/graphql-starter/components/drupal/BasicPage.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { Page } from "types"
1+
import type { NodePage } from "@/types"
22

3-
interface NodeBasicPageProps {
4-
node: Page
3+
interface BasicPageProps {
4+
node: NodePage
55
}
66

7-
export function NodeBasicPage({ node, ...props }: NodeBasicPageProps) {
7+
export function BasicPage({ node, ...props }: BasicPageProps) {
88
return (
99
<article {...props}>
1010
<h1 className="mb-4 text-6xl font-black leading-tight">{node.title}</h1>

‎starters/graphql-starter/components/preview-alert.tsx

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎starters/graphql-starter/lib/drupal.ts

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { DrupalClient } from "next-drupal"
22

3-
export const drupal = new DrupalClient(
4-
process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
5-
{
6-
previewSecret: process.env.DRUPAL_PREVIEW_SECRET,
7-
auth: {
8-
clientId: process.env.DRUPAL_CLIENT_ID,
9-
clientSecret: process.env.DRUPAL_CLIENT_SECRET,
10-
},
11-
}
12-
)
3+
const baseUrl: string = process.env.NEXT_PUBLIC_DRUPAL_BASE_URL || ""
4+
const clientId = process.env.DRUPAL_CLIENT_ID || ""
5+
const clientSecret = process.env.DRUPAL_CLIENT_SECRET || ""
6+
const previewSecret = process.env.DRUPAL_PREVIEW_SECRET
7+
8+
export const drupal = new DrupalClient(baseUrl, {
9+
auth: {
10+
clientId,
11+
clientSecret,
12+
},
13+
previewSecret,
14+
})
1315

1416
export const graphqlEndpoint = drupal.buildUrl("/graphql")
1517

‎starters/graphql-starter/next-env.d.ts

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎starters/graphql-starter/next.config.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
3+
reactStrictMode: true,
34
images: {
4-
domains: [process.env.NEXT_IMAGE_DOMAIN],
5+
remotePatterns: [
6+
{
7+
// protocol: 'https',
8+
hostname: process.env.NEXT_IMAGE_DOMAIN,
9+
// port: '',
10+
// pathname: '/sites/default/files/**',
11+
},
12+
],
513
},
614
}
715

‎starters/graphql-starter/package.json

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,27 @@
88
"build": "next build",
99
"start": "next start",
1010
"preview": "next build && next start",
11-
"lint": "next lint"
11+
"lint": "next lint",
12+
"format": "prettier --write .",
13+
"format:check": "prettier --check ."
1214
},
1315
"dependencies": {
14-
"@tailwindcss/typography": "^0.5.8",
15-
"next": "^13 || ^14",
16+
"next": "^14",
1617
"next-drupal": "^1.6.0",
1718
"react": "^18.2.0",
18-
"react-dom": "^18.2.0",
19-
"sharp": "^0.31.2"
19+
"react-dom": "^18.2.0"
2020
},
2121
"devDependencies": {
22-
"@types/node": "^18.11.10",
23-
"@types/react": "^18.0.26",
24-
"@types/react-dom": "^18.0.9",
25-
"autoprefixer": "^10.4.13",
26-
"eslint": "^8.28.0",
27-
"eslint-config-next": "^13.0.6",
28-
"postcss": "^8.4.19",
29-
"tailwindcss": "^3.2.4",
30-
"typescript": "^5.2.2"
22+
"@tailwindcss/typography": "^0.5.10",
23+
"@types/node": "^20.10.0",
24+
"@types/react": "^18.2.39",
25+
"@types/react-dom": "^18.2.17",
26+
"autoprefixer": "^10.4.16",
27+
"eslint": "^8.54.0",
28+
"eslint-config-next": "^14.0.3",
29+
"postcss": "^8.4.31",
30+
"prettier": "^3.1.0",
31+
"tailwindcss": "^3.3.5",
32+
"typescript": "^5.3.2"
3133
}
3234
}

0 commit comments

Comments
 (0)