Frontend Serverless with React and GraphQL

Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.

0. Getting Started
1. Create the Next.js base
2. Add Styled Components
3. Add Ant Design
4. Add main layout
5. Add global style
6. Add MainHead component
7. Add Layout
8. Add MainFooter
9. Add MainNavbar
10. Add GraphCMS backend
11. Add WithApollo
12. Add GraphQL request files
13. Add GraphQLCodeGen type generation
14. Add the RecipeList Component
15. Add loading, error, warning alerts
16. Add RecipeListItem component
17. Add Recipe page
18. Add OneRecipe component
19. Deploy using Vercel
20. Add Auth0 library
21. Add Auth0 Api Functions
22. Add useFetchUser Hook
23. Add Login / Logout to the Navbar
24. Add a MyRecipes Page
25. Add a Like Button
26. Add a Favorites Page
27. Add a Create Recipe Page
28. Add a Create Recipe Form
29. Add a Form Input
30. Add a Form TextInput
31. Add Form Ingredient
32. Add Dropdown Input
33. Controlled vs. Uncontrolled Components
34. Add a Delete Ingredient Button
35. Add a Form Submit Mutation
36. Add Update Recipe Page
37. Add Update Recipe Form
38. Add Update Recipe Mutation
39. Add Delete Recipe Button
40. Add GraphQL Proxy
41. Lock down the GraphCMS Api
42. Add Banned Mutation Check
43. Add Verify User Check
44. Add Verify User Permissions Check
45. Add Picture Uploader

36. Add Update Recipe Page

Objective: Create a `my-recipes/[id]` route to allow users to edit their own pages.

Let's create the my-recipe page which will turn into the update recipe page after we create a component for that in the next step. For now though, we will keep it simple. Create the following file:

pages/my-recipes/[id].tsx

import { MainLayout } from '../../components/layout/MainLayout';
const MyRecipe = ({ id }) => {
  return (
    <MainLayout title="Update Recipe">
      <h1>Update Recipe</h1>
    </MainLayout>
  );
};
MyRecipe.getInitialProps = ({ query }) => {
  const { id } = query;
  return { id };
};
export default MyRecipe;