Initial commit from Create Next App

colbyfayock · Jun 5, 2021 · 737e40b · 737e40b
commit 737e40b
Show file tree

Hide file tree

Showing 13 changed files with 2,454 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+# Next.js WordPress Starter
+
+## ⚡️ Quick Start
+
+### Requirements
+* [WordPress](https://wordpress.org/)
+* [WPGraphQL](https://www.wpgraphql.com/)
+
+```bash
+yarn create next-app -e https://github.com/colbyfayock/next-wpgraphql-basic-starter
+# or
+npx create-next-app -e https://github.com/colbyfayock/next-wpgraphql-basic-starter
+```
+
+Add an `.env.local` file to the root with the following:
+```
+WORDPRESS_GRAPHQL_ENDPOINT="http://yourhost.com/graphql"
+```
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "public/*": ["../public/*"]
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "demo-nextjs-wpgraphql-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.15",
+    "graphql": "^15.5.0",
+    "next": "10.1.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/src/lib/apollo-client.js b/src/lib/apollo-client.js
@@ -0,0 +1,27 @@
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
+
+let client;
+
+/**
+ * getApolloClient
+ */
+
+export function getApolloClient() {
+  if (!client) {
+    client = _createApolloClient();
+  }
+  return client;
+}
+
+/**
+ * createApolloClient
+ */
+
+export function _createApolloClient() {
+  return new ApolloClient({
+    link: new HttpLink({
+      uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT,
+    }),
+    cache: new InMemoryCache(),
+  });
+}
diff --git a/src/pages/_app.js b/src/pages/_app.js
@@ -0,0 +1,7 @@
+import '../styles/globals.css'
+
+function MyApp({ Component, pageProps = {} }) {
+  return <Component {...pageProps} />;
+}
+
+export default MyApp
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -0,0 +1,96 @@
+import Head from 'next/head'
+import Link from 'next/link'
+import { gql } from '@apollo/client';
+
+import { getApolloClient } from 'lib/apollo-client';
+
+import styles from '../styles/Home.module.css'
+
+export default function Home({ page, posts }) {
+  const { title, description } = page;
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>{title}</h1>
+
+        <p className={styles.description}>{ description }</p>
+
+        <ul className={styles.grid}>
+          {posts && posts.length > 0 && posts.map(post => {
+            return (
+              <li key={post.slug} className={styles.card}>
+                <Link href={post.path}>
+                  <a>
+                    <h3 dangerouslySetInnerHTML={{
+                      __html: post.title
+                    }} />
+                    <div dangerouslySetInnerHTML={{
+                      __html: post.excerpt
+                    }} />
+                  </a>
+                </Link>
+              </li>
+            );
+          })}
+
+          {!posts || posts.length === 0 && (
+            <li>
+              <p>
+                Oops, no posts found!
+              </p>
+            </li>
+          )}
+        </ul>
+      </main>
+    </div>
+  )
+}
+
+export async function getStaticProps() {
+  const apolloClient = getApolloClient();
+
+  const data = await apolloClient.query({
+    query: gql`
+      {
+        generalSettings {
+          title
+          description
+        }
+        posts(first: 10000) {
+          edges {
+            node {
+              id
+              excerpt
+              title
+              slug
+            }
+          }
+        }
+      }
+    `,
+  });
+
+  const posts = data?.data.posts.edges.map(({ node }) => node).map(post => {
+    return {
+      ...post,
+      path: `/posts/${post.slug}`
+    }
+  });
+
+  const page = {
+    ...data?.data.generalSettings
+  }
+
+  return {
+    props: {
+      page,
+      posts
+    }
+  }
+}
diff --git a/src/pages/posts/[postSlug].js b/src/pages/posts/[postSlug].js
@@ -0,0 +1,110 @@
+import Head from 'next/head'
+import Link from 'next/link'
+import { gql } from '@apollo/client';
+
+import { getApolloClient } from 'lib/apollo-client';
+
+import styles from '../../styles/Home.module.css'
+
+export default function Post({ post, site }) {
+  return (
+    <div className={styles.container}>
+      <Head>
+        <title>{ post.title }</title>
+        <meta name="description" content={`Read more about ${post.title} on ${site.title}`} />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <main className={styles.main}>
+        <h1 className={styles.title}>
+          { post.title }
+        </h1>
+
+        <div className={styles.grid}>
+          <div className={styles.content} dangerouslySetInnerHTML={{
+            __html: post.content
+          }} />
+        </div>
+
+        <p className={styles.backToHome}>
+          <Link href="/">
+            <a>
+              &lt; Back to home
+            </a>
+          </Link>
+        </p>
+      </main>
+    </div>
+  )
+}
+
+export async function getStaticProps({ params = {} } = {}) {
+  const { postSlug } = params;
+
+  const apolloClient = getApolloClient();
+
+  const data = await apolloClient.query({
+    query: gql`
+      query PostBySlug($slug: String!) {
+        generalSettings {
+          title
+        }
+        postBy(slug: $slug) {
+          id
+          content
+          title
+          slug
+        }
+      }
+    `,
+    variables: {
+      slug: postSlug
+    }
+  });
+
+  const post = data?.data.postBy;
+
+  const site = {
+    ...data?.data.generalSettings
+  }
+
+  return {
+    props: {
+      post,
+      site
+    }
+  }
+}
+
+export async function getStaticPaths() {
+  const apolloClient = getApolloClient();
+
+  const data = await apolloClient.query({
+    query: gql`
+      {
+        posts(first: 10000) {
+          edges {
+            node {
+              id
+              title
+              slug
+            }
+          }
+        }
+      }
+    `,
+  });
+
+  const posts = data?.data.posts.edges.map(({ node }) => node);
+
+  return {
+    paths: posts.map(({ slug }) => {
+      return {
+        params: {
+          postSlug: slug
+        }
+      }
+    }),
+    fallback: false
+  }
+}