passing object to graphql resolver shows object as undefined - node.js

Question

I'm new to graphql and am working on this issue for a while. My frontend uses React.js and Apollo Client, and backend is Node.js with Apollo GraphQL and Prisma. I am trying to create a simple mutation that will add a recipe.
Here is my react component code:
const [addRecipe] = useMutation(CREATE_RECIPE)
const addRecipeClick = () => {
const recipeData = {
title: 'Crinkle Cookies',
author: 'Adina', ingredients: [{ quantity: '1 c', name: 'cocoa' }], link: '', imageURL: ''
}
addRecipe({ variables: { recipe: recipeData } })
.then(() => {
enqueueSnackbar('Recipe Added!', { variant: 'success' })
})
.catch(() => enqueueSnackbar(`Unable to add recipe`, { variant: 'error' }))
}
apollo client query:
export const CREATE_RECIPE = gql`
mutation($recipe: RecipeInput!) {
createRecipe(recipe: $recipe){
recipes {
title
author
ingredients {
quantity
name
}
}
}
}`
backend schema:
type Mutation {
createRecipe(recipe: RecipeInput!): RecipeResults
}
input RecipeInput {
title: String!,
author: String!,
ingredients: [Ingredient]!,
link: String,
imageURL: String
}
backend resolver:
const createRecipe = async (recipe: RecipeInput) => {
console.log('createRecipe resolver: recipe ', recipe) // undefined
try {
const result = await prisma.recipe.create({
data: recipe
})
const recipes = await prisma.recipe.findMany()
return { recipes }
}
catch (e) {
console.log('error: ', e)
return {}
}
}
When I log out 'recipeData' on the frontend, console shows its value is set.
However, when I log out 'recipe' in createRecipe() resolver, it's undefined. Can't figure out why.