Skip to content

Instantly share code, notes, and snippets.

Avatar
🥚
Probably eating

Nader Dabit dabit3

🥚
Probably eating
View GitHub Profile
@dabit3
dabit3 / combined-config.js
Created Oct 29, 2020
Combining CDK outputs with Amplify configuration
View combined-config.js
import Amplify from 'aws-amplify';
const { AppsyncCdkAppStack } = require('./outputs.json');
import config from './aws-exports';
Amplify.configure({
...config,
aws_appsync_graphqlEndpoint: AppsyncCdkAppStack.GraphQLAPIURL,
aws_appsync_apiKey: AppsyncCdkAppStack.GraphQLAPIKey
})
@dabit3
dabit3 / pages.js
Last active Oct 22, 2020
Next.js + Amplify - pages/api/pages.js
View pages.js
// 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
dabit3 / [id].js
Created Oct 22, 2020
Next.js + Amplify - pages/posts/[id].js part 2
View [id].js
// 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
dabit3 / Comments.js
Last active Oct 22, 2020
Next.js + Amplify - components/Comments.js
View Comments.js
// 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
dabit3 / configureAmplify.js
Last active Oct 22, 2020
Next.js + Amplify - configureAmplify.js
View configureAmplify.js
// configureAmplify.js
import Amplify from 'aws-amplify';
import config from './src/aws-exports';
Amplify.configure({ ...config, ssr: true });
@dabit3
dabit3 / create-post.js
Last active Oct 22, 2020
Next.js + Amplify - pages/create-post.js
View create-post.js
// 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
dabit3 / [id].js
Last active Oct 22, 2020
Next.js + Amplify - pages/posts/[id].js part 1
View [id].js
// 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
dabit3 / _app.js
Last active Oct 22, 2020
Next.js + Amplify - pages/_app.js
View _app.js
// 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
dabit3 / checkUser.js
Last active Oct 22, 2020
Next.js + Amplify - helpers/checkUser.js
View checkUser.js
// 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
dabit3 / schema.graphql
Created Oct 22, 2020
Next.js + Amplify - schema.graphql
View schema.graphql
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
You can’t perform that action at this time.