React类组件和Apollo的使用

最新推荐文章于 2024-09-01 09:36:00 发布

wifi___

最新推荐文章于 2024-09-01 09:36:00 发布

阅读量239

点赞数

分类专栏：前端文章标签：前端 javascript react.js graphql

本文链接：https://blog.youkuaiyun.com/watermelonmelon_/article/details/128615609

版权

前端专栏收录该内容

5 篇文章

订阅专栏

文章展示了如何在React组件中结合ApolloClient进行创建和更新操作。通过使用`Mutation`组件进行两次提交，首先创建会议数据，然后发送会议信息给用户。涉及到的GraphQL查询和突变包括创建会议、更新会议、获取员工、部门等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React类组件需要使用Apollo做两次提交的使用方式：

import React from 'react';
import { Col, Form, Input, Modal, Row, Spin, message, Checkbox, Radio, DatePicker, Button, Select, Switch } from 'antd';
import { FormComponentProps } from 'antd/es/form';
import { Query, Mutation } from 'react-apollo';
import moment from 'moment';
import { generateFormFields } from '@/utils/utils';
import Uploader from '@/components/Uploader';
import SelectAuto from '@/components/SecurityScope';
import {
  createMeeting as CREATE_MEETING,
  updateMeeting as UPDATE_MEETING,
  employees as QUERY_PERSON,
  departments as QUERY_DEPARTMENT,
  queryCheckInPeoples as QUERYCHECKINPEOPLES,
  dataDictionary as DATADICTIONARY,
  sendMeetingToUser as SENDMEETINGTOUSER,
} from './gqls/conferenceManage.gql';
import TreeSelectData from '../components/TreeSelectMeetingDataType';
import { connect } from 'dva';
const { Option } = Select;
const { RangePicker } = DatePicker;

export const ConferenceFormCreate = Form.create(formValue)((props: any) => {

  const submit = async (createMeetingRoom: any ,sendMeetingMessage: any,input: any) =>{
    let meetingData = await createMeetingRoom({
      variables: {
        input: {
          data: {
            ...input,
            creator: props.userId,
          },
        },
      },
    });
    console.log('xxxxxxxxxxxxxxx',meetingData)
    sendMeetingMessage({
      variables: {
        id: meetingData?.data?.createMeeting?.meeting?.id
      }
    });
  }

  return (
    <Mutation mutation={CREATE_MEETING}>
      {(createMeetingRoom: any, { loading }: any): any => (
        <Mutation mutation={SENDMEETINGTOUSER}>
        {(sendMeetingMessage: any, { loading }: any):any=>(
           <Spin spinning={loading}>
               <ConferenceForm {...props} submit={
                async (input:any)=> {
                  await submit(createMeetingRoom,sendMeetingMessage,input);
                }
               } />
           </Spin>
          )}
          </Mutation>
      )}
    </Mutation>
  );
});

.gql文件：

#签到负责人默认本支部所有支委
query queryCheckInPeoples ($organization: ID!, $filter: EmployeeFilter, $pageSize: Int = 10000) {
  employees(organization: $organization, filter:$filter, pageSize: $pageSize){
    edges{
      node{
        id
        name
      }
    }
  }
}

mutation sendMeetingToUser($id:ID!){
  sendMeetingToUser(id:$id)
}