Блог

У меня есть простой компонент React для редактирования поста. Он получает текущие данные из базы данных и создает форму для их редактирования:

 import React from 'react'; import { useQuery, gql } from '@apollo/client'; import { useParams } from 'react-router-dom'; import { Container, Row } from 'reactstrap'; import EditPostForm from './components/EditPostForm';  const CURRENTPOSTDATA = gql`  query CurrentPostData($pid: ID!) {  post(id: $pid) {  title  content  }  } `;  const saveToDatabase = (values) =gt; {  // Make some validation checks  // Execute graphQL mutation  // Redirect to another page }  const EditPostComp = () =gt; {  const { postid } = useParams();   const { loading, error, data } = useQuery(CURRENTPOSTDATA, {  variables: { pid: postid },  });   if (error) return lt;pgt;Errorlt;/pgt;;   if (loading) return lt;pgt;Loading...lt;/pgt;;   return (  lt;Containergt;  lt;Rowgt;  lt;EditPostForm  onSubmit={saveToDatabase}  posttitle={data.post.title}  postcontent={data.post.content}  /gt;  lt;/Rowgt;  lt;/Containergt;  ); };  export default EditPostComp;  

Компонент формы выглядит следующим образом:

 import React from 'react'; import PropTypes from 'prop-types'; import {  Card, CardBody, Col, Button, ButtonToolbar, } from 'reactstrap'; import { Field, reduxForm } from 'redux-form';  const EditPostForm = ({  handleSubmit,  reset,  posttitle,  postcontent, }) =gt; (  lt;Col md={12} lg={12}gt;  lt;Cardgt;  lt;CardBodygt;  lt;form className="form form--horizontal" onSubmit={handleSubmit}gt;  lt;div className="form__form-group"gt;  lt;span className="form__form-group-label"gt;Titlelt;/spangt;  lt;div className="form__form-group-field"gt;  lt;Field  name="posttitle"  component="input"  type="text"  placeholder={posttitle}  /gt;  lt;/divgt;  lt;/divgt;  lt;div className="form__form-group"gt;  lt;span className="form__form-group-label"gt;Contentlt;/spangt;  lt;div className="form__form-group-field"gt;  lt;Field  name="postcontent"  component="input"  type="text"  placeholder={postcontent}  /gt;  lt;/divgt;  lt;/divgt;  lt;ButtonToolbar className="form__button-toolbar"gt;  lt;Button color="primary" type="submit"gt;Savelt;/Buttongt;  lt;Button type="button" onClick={reset}gt;  Cancel  lt;/Buttongt;  lt;/ButtonToolbargt;  lt;/formgt;  lt;/CardBodygt;  lt;/Cardgt;  lt;/Colgt; );  EditPostForm.propTypes = {  handleSubmit: PropTypes.func.isRequired,  reset: PropTypes.func.isRequired,  posttitle: PropTypes.string.isRequired,  postcontent: PropTypes.string.isRequired, };  export default reduxForm({  form: 'post_edit_form', })(EditPostForm);  

Как я могу использовать useMutation(…) из «@apollo/client» для выполнения мутации GraphQL в моей функции saveToDatabase (…)? Как я уже видел, он может быть помещен только внутри компонента, а не отдельной функции (почему?). Но если я помещу его в EditPostComp под запросом поиска, я не смогу выполнить проверку или перенаправить на другую страницу после успеха…

Спасибо!