useMutation 无法在 React 前端工作，但可以在具有相同变量的 apollo 客户端中工作 Mutation.js

Question

我正在尝试执行一个名为 createGroup 的突变，当我在 graphQl apolo 客户端执行此操作时，它会成功在 firebase 集合中创建组，但在反应前端中它不起作用。当在 appolo 开发工具中单击创建按钮时，它显示为突变已开始，但 firebase 上没有任何反应。

来自react-frontend的我的mutation.js

import { gql } from "@apollo/client";

export const CREATE_GROUP = gql `
mutation CreateGroup(
  $name: String!,
  $description: String!,
  $leaders: [String]!,
  $members: [String]!,
  $notes: [NoteInput]!
) {
  createGroup(
    name: $name,
    description: $description,
    leaders: $leaders,
    members: $members,
    notes: $notes
  ) {
    id
    name
    description
    leaders {
      id
      name
    }
    members {
      id
      name
    }
    notes {
      id
      content
      createdBy {
        id
        name  
      }
      createdAt
    }
  }
}
`;

创建群组功能

import React, { useState } from "react";
import { useMutation } from "@apollo/client";
import { CREATE_GROUP } from "../../GraphQL/Mutations"; 



const CreateGroup = () => {
  const [selectedLeaders, setSelectedLeaders] = useState([]);
  const [selectedMembers, setSelectedMembers] = useState([]);
  const [groupName, setGroupName] = useState("");
  const [groupDescription, setGroupDescription] = useState("");
  const [submitted, setSubmitted] = useState(false);


  const [availableLeaders, setAvailableLeaders] = useState(dataLeaders);
  const [availableMembers, setAvailableMembers] = useState(dataMembers);


  
  const [createGroup, {error}] = useMutation(CREATE_GROUP);

  const handleSubmit = async (e) => {
    e.preventDefault()
    console.log("just cliked me from submit")

      await createGroup({
        variables: {
          name: groupName,
          description: groupDescription,
          leaders: selectedLeaders,
          members: selectedMembers,
        },
      });
      if(error){
        console.log(error)
      }

      setSubmitted(true);
  };

索引.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
const client = new ApolloClient({
  uri: process.env.REACT_APP_APOLLO_SERVER_URL,
  cache: new InMemoryCache(),
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <ApolloProvider client={client}>
  <App />
  </ApolloProvider>
   
  </BrowserRouter>
);

reportWebVitals();

我尝试用 apollo 开发工具检查它，我可以看到突变开始，我也尝试在 apollo 开发工具中运行突变，但它永远旋转而不返回任何东西

Answer 1

我通常不会

await

突变的结果，相反，我喜欢利用它的

onSuccess

和

onError

回调。

示例：

const [createGroup] = useMutation(CREATE_GROUP, {
  variables: {
    name: groupName,
    description: groupDescription,
    leaders: selectedLeaders,
    members: selectedMembers,
  },
  onCompleted: (data) => {
    setSubmitted(true);
    …do something with the data
  },
  onError: (error) => console.error(error),
})