React， Graphql - 如何使用 useMutation hook.

Question

我正在尝试使用React，Graphql，Typecipt和useMutation钩子创建一个简单的演示。

我有一个mongoDB设置和一个useQury钩子设置，一切都可以工作，我可以从useQuery输出返回。

我也在使用apollo：gernerate来生成类型

我遇到的问题是让useMutation工作。

App.tsx

import React, { useState } from 'react';
import './App.css';
import { RecipeData } from '../generated/RecipeData';
import { GET_ALL_RECIPES, ADD_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 handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setName(e.target.value)
}
const handleDesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setDes(e.target.value)
}
const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
const [createRecipe] = useMutation(
ADD_RECIPE,{
onCompleted(data) {
confirm(data);
}
}
);
}

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, i) => (
<li key={i}>{recipe.name}</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;

query/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($type: String){
addRecipe(type: $type){
name
description
}
}
`   

生成/添加食谱.ts

export interface AddRecipe_addRecipe {
__typename: "Recipe";
name: string | null;
description: string | null;
}
export interface AddRecipe {
addRecipe: AddRecipe_addRecipe | null;
}
export interface AddRecipeVariables {
type?: string | null;
}

Answer 1

你用错useMutation钩子。

您当前的代码：

const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
const [createRecipe] = useMutation(ADD_RECIPE, {
onCompleted(data) {
confirm(data);
}
});
};

现在提取useMutationhandleClick函数外部的钩子调用，并调用createRecipe这是以正确方式单击时要调用的实际函数：

const [createRecipe] = useMutation(ADD_RECIPE, {
onCompleted(data) {
confirm(data);
}
});
const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
createRecipe({ variables: { name, description }})
};

你必须在组件的顶层使用 react 钩子，不要将它们放在函数、循环或条件语句中:)

文档在这里： https://www.apollographql.com/docs/react/data/mutations/