Rename and small refactoring

src/graphql/api/index.ts

@@ -12,10 +12,7 @@ import { CLIENT_URL } from '../constants'
 // @ts-ignore
 global.fetch = require('node-fetch')
 
-export const endpoint =
-  process.env.NODE_ENV === 'production'
-    ? `${CLIENT_URL}/api/graphql`
-    : `${CLIENT_URL}/api/graphql`
+export const endpoint = `${CLIENT_URL}/api/graphql`
 
 const errorLink = onError(({ networkError, graphQLErrors }) => {
   if (graphQLErrors) {

src/graphql/api/cookies.ts → src/graphql/api/withCookies.ts

@@ -20,9 +20,9 @@ const cookie = (res, name, value, options = {}) => {
 /**
  * Adds `cookie` function on `res.cookie` to set cookies for response
  */
-const cookies = (handler) => (req, res) => {
+const withCookies = (handler) => (req, res) => {
   res.cookie = (name, value, options) => cookie(res, name, value, options)
   return handler(req, res)
 }
 
-export default cookies
+export default withCookies

src/graphql/context/index.ts

@@ -1,4 +1,17 @@
-import { isAuthenticated } from './isMe'
+import Cryptr from 'cryptr'
+
+function isAuthenticated(req) {
+  const { session } = req?.cookies
+  if (!session || session.length < 32) {
+    return false
+  }
+
+  const secret = process.env.PASSWORD_TOKEN
+  const validated = process.env.PASSWORD
+  const cryptr = new Cryptr(secret)
+  const decrypted = cryptr.decrypt(session)
+  return decrypted === validated
+}
 
 export default function context(ctx) {
   return {

src/graphql/fragments/index.ts

@@ -1,7 +1,7 @@
-import { BookmarkInfoFragment } from './bookmarkFragment'
-import { EpisodeInfoFragment } from './episodeFragment'
-import { PostInfoFragment } from './postFragment'
-import { RepoInfoFragment } from './repoFragment'
+import { BookmarkInfoFragment } from './bookmark'
+import { EpisodeInfoFragment } from './episode'
+import { PostInfoFragment } from './post'
+import { RepoInfoFragment } from './repo'
 
 export {
   BookmarkInfoFragment,

src/graphql/queries/getEpisodes.ts → src/graphql/queries/episodes.ts

@@ -1,7 +1,7 @@
 import { EpisodeInfoFragment } from '../fragments'
 import { gql } from '@apollo/client'
 
-export const getEpisodes = gql`
+export const GET_EPISODES = gql`
   query GetEpisodes {
     episodes {
       ...EpisodeInfo

src/graphql/queries/getHome.ts → src/graphql/queries/home.ts

@@ -1,7 +1,7 @@
 import { PostInfoFragment, EpisodeInfoFragment } from '../fragments'
 import { gql } from '@apollo/client'
 
-export const getHome = gql`
+export const GET_HOME = gql`
   query GetHome {
     posts(first: 5) {
       ...PostInfo

src/graphql/queries/index.ts

@@ -1,8 +1,7 @@
-import { GET_BOOKMARKS } from './getBookmarks'
-import { getEpisodes } from './getEpisodes'
-import { getHome } from './getHome'
-import { getPosts } from './getPosts'
-import { getPost } from './getPost'
+import { GET_BOOKMARKS } from './bookmarks'
+import { GET_EPISODES } from './episodes'
+import { GET_HOME } from './home'
+import { GET_POSTS, GET_POST } from './posts'
 import { IS_ME } from './isMe'
 
-export { GET_BOOKMARKS, getEpisodes, getHome, getPosts, getPost, IS_ME }
+export { GET_BOOKMARKS, GET_EPISODES, GET_HOME, GET_POSTS, GET_POST, IS_ME }

src/graphql/queries/getPost.ts → src/graphql/queries/posts.ts

@@ -1,7 +1,16 @@
 import { PostInfoFragment } from '../fragments'
 import { gql } from '@apollo/client'
 
-export const getPost = gql`
+export const GET_POSTS = gql`
+  query GetPosts {
+    posts {
+      ...PostInfo
+    }
+  }
+  ${PostInfoFragment}
+`
+
+export const GET_POST = gql`
   query GetPost($slug: String!, $first: Int) {
     post(slug: $slug) {
       ...PostInfo

src/pages/api/graphql/index.ts

@@ -2,15 +2,12 @@ import { ApolloServer } from 'apollo-server-micro'
 import typeDefs from '~/graphql/schema'
 import resolvers from '~/graphql/resolvers'
 import context from '~/graphql/context'
-import cookies from '~/graphql/api/cookies'
+import withCookies from '~/graphql/api/withCookies'
 
 const apolloServer = new ApolloServer({
   typeDefs,
   resolvers,
   context,
-  formatError({ message }) {
-    throw new Error(message)
-  },
 })
 
 export const config = {
@@ -22,4 +19,4 @@ export const config = {
 const handler = apolloServer.createHandler({ path: '/api/graphql' })
 
 // attach cookie helpers to all response
-export default cookies(handler)
+export default withCookies(handler)

src/pages/bookmarks.tsx

@@ -11,6 +11,8 @@ import { getStaticApolloClient } from '~/graphql/api'
 import { withApollo } from '~/components/withApollo'
 
 function Bookmarks() {
+  // pre-populate bookmarks from the cache, but check for any new ones after
+  // the page loads
   const { data } = useGetBookmarksQuery({ fetchPolicy: 'cache-and-network' })
   const { bookmarks } = data
   const { isMe } = useAuth()
@@ -30,6 +32,16 @@ function Bookmarks() {
 export async function getStaticProps() {
   const client = await getStaticApolloClient()
   await client.query({ query: GET_BOOKMARKS })
+  /*
+    Because this is using withApollo, the data from this query will be
+    pre-populated in the Apollo cache at build time. When the user first
+    visits this page, we can retreive the data from the cache like this:
+
+    const { data } = useGetBookmarksQuery({ fetchPolicy: 'cache-and-network' })
+
+    This preserves the ability for the page to render all bookmarks instantly,
+    then get progressively updated if any new bookmarks come in over the wire.
+  */
   return {
     props: {
       apolloStaticCache: client.cache.extract(),

src/pages/index.tsx

@@ -6,7 +6,7 @@ import OverthoughtList from '~/components/Overthought/List'
 import DesignDetailsGrid from '~/components/DesignDetailsGrid'
 import PodcastEpisodesList from '~/components/PodcastEpisodesList'
 import FigmaPlugins from '~/components/FigmaPlugins'
-import { getHome } from '~/graphql/queries'
+import { GET_HOME } from '~/graphql/queries'
 import { Post, Episode, Repo } from '~/graphql/types.generated'
 import theme from '~/components/Theme'
 import { getStaticApolloClient } from '~/graphql/api'
@@ -316,7 +316,7 @@ function Home({ data }: Props) {
 
 export async function getStaticProps() {
   const client = await getStaticApolloClient()
-  const { data } = await client.query({ query: getHome })
+  const { data } = await client.query({ query: GET_HOME })
   return {
     props: {
       data,

src/pages/login.tsx

@@ -11,7 +11,7 @@ function Login() {
 
   const [handleLogin] = useLoginMutation({
     variables: { password },
-    onCompleted: (data) => data.login && router.push('/'),
+    onCompleted: (data) => data.login && router.push('/bookmarks'),
   })
 
   function onSubmit(e) {
@@ -41,4 +41,8 @@ function Login() {
   )
 }
 
+/*
+  withApollo is needed to automatically wrap this page in an ApolloProvider,
+  allowing for the use of mutationHooks on the client.
+*/
 export default withApollo(Login)

src/pages/logout.tsx

@@ -6,6 +6,7 @@ import FullscreenLoading from '~/components/FullscreenLoading'
 
 function Logout() {
   const router = useRouter()
+
   const [handleLogout] = useLogoutMutation({
     onCompleted: () => router.push('/'),
   })
@@ -17,4 +18,8 @@ function Logout() {
   return <FullscreenLoading />
 }
 
+/*
+  withApollo is needed to automatically wrap this page in an ApolloProvider,
+  allowing for the use of mutationHooks on the client.
+*/
 export default withApollo(Logout)

src/pages/overthought/[slug].tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Post } from '~/graphql/types.generated'
-import { getPost, getPosts } from '~/graphql/queries'
+import { GET_POST, GET_POSTS } from '~/graphql/queries'
 import Page from '~/components/Page'
 import PostContainer from '~/components/Overthought/Post'
 import NotFound from '~/components/Overthought/NotFound'
@@ -29,7 +29,7 @@ function OverthoughtPost({ data }: Props) {
 
 export async function getStaticPaths() {
   const client = await getStaticApolloClient()
-  const { data } = await client.query({ query: getPosts })
+  const { data } = await client.query({ query: GET_POSTS })
 
   if (!data) return { paths: [], fallback: true }
 
@@ -43,14 +43,13 @@ export async function getStaticPaths() {
 export async function getStaticProps({ params: { slug } }) {
   const client = await getStaticApolloClient()
   const { data } = await client.query({
-    query: getPost,
+    query: GET_POST,
     variables: { slug, first: 5 },
   })
 
   return {
     props: {
       slug,
-      apolloStaticCache: client.cache.extract(),
       data: {
         post: data.post,
         posts: data.posts,

src/pages/overthought/index.tsx

@@ -5,7 +5,7 @@ import { Post } from '~/graphql/types.generated'
 import OverthoughtSubscribeBox from '~/components/Overthought/Subscribe'
 import SEO from '~/components/Overthought/SEO'
 import OverthoughtList from '~/components/Overthought/List'
-import { getPosts } from '~/graphql/queries'
+import { GET_POSTS } from '~/graphql/queries'
 import { getStaticApolloClient } from '~/graphql/api'
 
 interface Props {
@@ -36,11 +36,10 @@ function Overthought({ data }: Props) {
 
 export async function getStaticProps() {
   const client = await getStaticApolloClient()
-  const { data } = await client.query({ query: getPosts })
+  const { data } = await client.query({ query: GET_POSTS })
   return {
     props: {
       data,
-      apolloStaticCache: client.cache.extract(),
     },
   }
 }