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
}
}
}
}
`;