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.

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:


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