dabit3

// pages/api/pages.js
import { API } from 'aws-amplify';
import { listPosts } from '../../src/graphql/queries';

export default async (_, res) => {
  try {
    const postData = await API.graphql({ query: listPosts });
    res.json({ posts: postData.data.listPosts.items});
  } catch (err) {
    res.json({ error: true });

dabit3

// pages/posts/[id].js 
import { API } from 'aws-amplify';
import { getPost, listPosts } from '../../src/graphql/queries'
import '../../configureAmplify';
import { useRouter } from 'next/router';
import Comments from '../../components/Comments';
import checkUser from '../../helpers/checkUser';

export default function Post({ post }) {
  const router = useRouter();

dabit3

// components/Comments.js
import React, { useState, useEffect } from 'react';
import { API } from 'aws-amplify';
import { commentsByPostId } from '../src/graphql/queries';
import { createComment } from '../src/graphql/mutations';
import checkUser from '../helpers/checkUser';

const initialState = { message: '' };

export default function Comments({ postId }) {

dabit3

// configureAmplify.js
import Amplify from 'aws-amplify';
import config from './src/aws-exports';
Amplify.configure({ ...config, ssr: true });

dabit3

// pages/create-post.js
import { useState } from 'react';
import { AmplifySignOut, withAuthenticator } from '@aws-amplify/ui-react';
import { css } from 'emotion';
import { useRouter } from 'next/router';
import { createPost } from '../src/graphql/mutations';
import { API } from 'aws-amplify';

function CreatePost() {
  const [formState, updateFormState] = useState({ name: '', content: ''});

dabit3

// pages/posts/[id].js
import { API } from 'aws-amplify';
import { getPost, listPosts } from '../../src/graphql/queries'
import '../../configureAmplify';
import { useRouter } from 'next/router';

export default function Post({ post }) {
  const router = useRouter();
  if (router.isFallback) return <div>Loading...</div>
  return (

dabit3

// pages/_app.js
import '../styles/globals.css';
import { css } from 'emotion';
import Link from 'next/link';
import checkUser from '../helpers/checkUser';
import '../configureAmplify';

export default function MyApp({ Component, pageProps }) {
  const user = checkUser();
  return (

dabit3

// helpers/checkUser.js
import { useState, useEffect } from 'react';
import { Auth, Hub } from 'aws-amplify';

export default function checkUser() {
  const [user, setUser] = useState(null);
  useEffect(() => {
    checkUserAuth();
    const unsubscribe = Hub.listen('auth', () => checkUserAuth());
    return () => unsubscribe();

dabit3

type Post @model
  @auth(rules: [
    { allow: owner, ownerField: "username" },
    { allow: public, operations: [read] }
  ]) {
  id: ID!
  name: String!
  content: String
  comments: [Comment] @connection(keyName: "commentsByPostId", fields: ["id"])
  username: String

dabit3

// pages/index.js
import { useState, useEffect } from 'react';
import { API } from 'aws-amplify';
import Link from 'next/link';
import { css } from 'emotion';
import { listPosts } from '../src/graphql/queries';

export default function Home() {
  const [posts, updatePosts] = useState([]);
  useEffect(() => {