React, Graphql - Как использовать крючок useMutation - PullRequest
Новая
       2

React, Graphql - Как использовать крючок useMutation

0 голосов
/ 10 января 2020

Я пытаюсь создать простую демонстрацию, используя React, Graphql, Typescipt и ловушку 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;

запросы / 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
    }
  }
`

сгенерировано / AddRecipe.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;
}

1 Ответ

1 голос
/ 10 января 2020

Вы используете useMutation перехватывать неправильно.

Ваш текущий код: 

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

Теперь извлеките useMutation перехват вызова вне функции handleClick и вызовите createRecipe - это реальная функция, которая вызывается при правильном нажатии: 

const [createRecipe] = useMutation(ADD_RECIPE, {
  onCompleted(data) {
    confirm(data);
  }
});

const handleClick = (e: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
  createRecipe({ variables: { name, description }})
};

Вы должны использовать обработчики реакции на верхнем уровне ваших компонентов, не помещайте их в функции, циклы или условные заявления:)

Документация здесь: https://www.apollographql.com/docs/react/data/mutations/

...