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.

12. Add GraphQL request files

Objective: Add the queries and mutations that we will use in the rest of the app.

Click to download the graphQL files

This step is easy- just copy the following queries and mutations into the graphql/queries and graphql/mutations folders. Also make sure to install graphql-tag:

bash

npm install --save graphql-tag

graphql/mutations/createRecipe.ts

import gql from 'graphql-tag';
export const createRecipeGraphQL = gql`
  mutation createRecipeGraphQL($data: RecipeCreateInput!) {
    createRecipe(data: $data) {
      id
      title
      content
      description
      ingredients
      userLikes {
        id
      }
      owner
      image {
        id
        fileName
        height
        width
        size
        handle
      }
    }
  }
`;

graphql/mutations/createUserLike.ts

import gql from 'graphql-tag';
export const createUserLikeGraphQL = gql`
  mutation createUserLikeGraphQL($data: UserLikeCreateInput!) {
    createUserLike(data: $data) {
      id
      user
      recipe {
        id
      }
    }
  }
`;

graphql/mutations/deleteAsset.ts

import gql from 'graphql-tag';
export const deleteAssetGraphQL = gql`
  mutation deleteAssetGraphQL($where: AssetWhereUniqueInput!) {
    deleteAsset(where: $where) {
      id
    }
  }
`;

graphql/mutations/deleteRecipe.ts

import gql from 'graphql-tag';
export const deleteRecipeGraphQL = gql`
  mutation deleteRecipeGraphQL($where: RecipeWhereUniqueInput!) {
    deleteRecipe(where: $where) {
      id
    }
  }
`;

graphql/mutations/deleteUserLike.ts

import gql from 'graphql-tag';
export const deleteUserLikeGraphQL = gql`
  mutation deleteUserLikeGraphQL($where: UserLikeWhereUniqueInput!) {
    deleteUserLike(where: $where) {
      id
      user
    }
  }
`;

graphql/mutations/updateRecipe.ts

import gql from 'graphql-tag';
export const updateRecipeGraphQL = gql`
  mutation updateRecipeGraphQL(
    $data: RecipeUpdateInput!
    $where: RecipeWhereUniqueInput!
  ) {
    updateRecipe(data: $data, where: $where) {
      id
      title
      content
      description
      ingredients
      userLikes {
        id
      }
      owner
      image {
        id
        fileName
        height
        width
        size
        handle
      }
    }
  }
`;

graphql/queries/recipe.ts

import gql from 'graphql-tag';
export const recipeGraphQL = gql`
  query recipeGraphQL($where: RecipeWhereUniqueInput!) {
    recipe(where: $where) {
      id
      title
      content
      description
      ingredients
      userLikes {
        id
        user
      }
      owner
      image {
        id
        fileName
        height
        width
        size
        handle
      }
    }
  }
`;

graphql/queries/recipes.ts

import gql from 'graphql-tag';
export const recipesGraphQL = gql`
  query recipesGraphQL($where: RecipeWhereInput) {
    recipes(where: $where) {
      id
      title
      content
      description
      ingredients
      userLikes {
        id
        user
      }
      owner
      image {
        id
        fileName
        height
        width
        size
        handle
      }
    }
  }
`;

graphql/queries/userLike.ts

import gql from 'graphql-tag';
export const userLikeGraphQL = gql`
  query userLikeGraphQL($where: UserLikeWhereUniqueInput!) {
    userLike(where: $where) {
      id
      user
      recipe {
        id
        title
        content
        description
        ingredients
        userLikes {
          id
          user
        }
        owner
        image {
          id
          fileName
          height
          width
          size
          handle
        }
      }
    }
  }
`;

graphql/queries/userLikes.ts

import gql from 'graphql-tag';
export const userLikesGraphQL = gql`
  query userLikesGraphQL($where: UserLikeWhereInput) {
    userLikes(where: $where) {
      id
      user
      recipe {
        id
        title
        content
        description
        ingredients
        userLikes {
          id
          user
        }
        owner
        image {
          id
          fileName
          height
          width
          size
          handle
        }
      }
    }
  }
`;