React，Graphql - 如何將變量傳遞給突變

Question

我正在嘗試在 React 中使用 Graphql 創建一個簡單的 CRUD 應用程序。

我有創建和閱讀，但我真的很難刪除。

我已經設置了所有后端，並且在 Playground 中一切正常。

在操場上，我可以使用刪除突變，例如

mutation{
    deleteRecipe(_id: "5e22e40f9f3478160a31555a"){
      _id
      name
    }
}

並得到回應

{
  "data": {
    "deleteRecipe": {
      "_id": "5e22e40f9f3478160a31555a",
      "name": "test 13"
    }
  }
}   

我在 React 中使用這種突變時遇到了很大的問題（在 React 中，Create 和 Read 正在工作）

服務器端

架構.js

exports.typeDefs = `

  type Recipe{
    _id: String
    name: String
    description: String
  }

  type Query{
    recipe:[Recipe]
  }

  type Mutation{
    addRecipe(name: String!, description: String):Recipe,
    deleteRecipe(_id: String!):Recipe
  }

`

解析器.js

exports.resolvers = {

  Query: {
    recipe: async (obj, args, { Recipe }, info) => {
      const allRecipes = await Recipe.find()
      return allRecipes
    }
  },
  Mutation: {
    addRecipe: async (obj, { name, description }, { Recipe }, info) => {
      const newRecipe = await new Recipe({
        name,
        description
      }).save()
      return newRecipe
    },
    deleteRecipe: async (obj, { _id }, { Recipe }, info) => {
      const delRecipe = await Recipe.findByIdAndRemove({ _id })
      return delRecipe
    }
  }
}   

客戶端

查詢/index.tsx

import { gql } from 'apollo-boost';

export const GET_ALL_RECIPES = gql`
  query RecipeData{
    recipe{
      _id
      name
      description
    }
  }
`

export const ADD_RECIPE = gql`
  mutation addRecipe($name: String!, $description:String){
    addRecipe(name: $name, description: $description){
      _id
      name
      description
    }
  }
`

export const DELETE_RECIPE = gql`
  mutation deleteRecipe($id: String!){
    deleteRecipe(_id: $id){
      _id
      name
      description
    }
  }
`

應用程序.tsx

import React, { useState } from 'react';
import './App.css';

import { RecipeData } from '../generated/RecipeData';
import { GET_ALL_RECIPES, ADD_RECIPE, DELETE_RECIPE } from '../queries';
import { useQuery, useMutation } from 'react-apollo-hooks';


const App: React.FC = () => {

  const [name, setName] = useState<string>('')
  const [description, setDes] = useState<string>('')
  const [] = useState<string>('')

  // useEffect(() => {
  //   deleteRecipe()
  // }, [recipeId])

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value)
  }

  const handleDesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setDes(e.target.value)
  }

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    createRecipe()
  };

  const [deleteRecipe] = useMutation(DELETE_RECIPE)

  const handelDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    const delID = e.target.parentElement.getAttribute("data-id")
    deleteRecipe({ variables: { _id: delID }, refetchQueries: ['RecipeData'] });
  }

  // const [deleteRecipe, {data}] = useMutation(DELETE_RECIPE, {
  //   variables: { _id:  }, refetchQueries: ['RecipeData']
  // })

  const [createRecipe, { error }] = useMutation(ADD_RECIPE, {
    variables: { name, description }, refetchQueries: ['RecipeData']
  })
  if (error) {
    console.error('erroring : ', error)
  }

  const { data, loading } = useQuery<RecipeData | null>(GET_ALL_RECIPES, {
    suspend: false
  })

  if (loading || !data) return <div>Loading</div>

  return (
    <div className="App">
      <h1>Graphql</h1>
      <ul>
        {
          data.recipe !== null && data.recipe.map((recipe) => (
            <li key={recipe._id} data-id={recipe._id}>
              {recipe.name}
              <button onClick={handelDelete}>X</button>
            </li>
          ))
        }
      </ul>

      <form>
        <div>
          <label>Name</label>
          <input
            type="text"
            value={name}
            onChange={handleNameChange}
          />
        </div>
        <div>
          <label>Description</label>
          <input
            type="text"
            value={description}
            onChange={handleDesChange}
          />
        </div>
        <button onClick={handleClick}>Add Recipe</button>
      </form>
    </div>
  );
}

export default App;

在網絡選項卡中，我收到錯誤

"Variable "$id" of required type "String!" was not provided.",… 

我假設我沒有將 id 值傳遞給 deleteRecipe

我如何將 id 傳遞給 deleteRecipe 此處

  const [deleteRecipe] = useMutation(DELETE_RECIPE)

  const handelDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    const delID = e.target.parentElement.getAttribute("data-id")
    deleteRecipe({ variables: { _id: delID }, refetchQueries: ['RecipeData'] });
  }

Answer 1

你的變量是id

{ variables: { id: delID }