使用 Mutation hook 更新 Graphql 服务器中的数据

Question

其实我是 React Native 的新手。在我最近的项目中，我在使用 useMutation 挂钩更新服务器中的数据时遇到了问题。我附上了我正在使用它的文件。

为了方便大家参考，附上游乐场的截图。

注意：- 我没有收到错误，服务器中的值也没有更新。如果我点击按钮。不需要重新获取它并使用查询显示信息，只需更新就足够了。

突变结构:

。

已发送 graphql 请求:

import React, { Component,useState } from 'react';
import { View, Text, StyleSheet, Dimensions,ScrollView,AsyncStorage,TouchableHighlight,Alert,KeyboardAvoidingView} from 'react-native';
import TopHeader from '../../Header/TopHeader';
import { gql } from 'apollo-boost';
import Input from '../../SignIn/Input';

import { ScreenLoader } from '../../Loader';
import { useMutation } from '@apollo/react-hooks';


export const UPDATE_USER_DETAILS = gql`
mutation UpdateUser($input: AccountInput!){
  accountUpdate(input: $input){
    accountErrors{
      message
    }
    user{
      id
      email
      firstName
      lastName
    }
  }
}
`;

const getToken = async () => {
  const token = await AsyncStorage.getItem('token');
  console.log("Token = "+token);
  return token;
}

function UpdateUserComponent({ firstname,lastname }) {

  const [newfirstName, setNewfirstName] = useState(firstname);
  const [newlastName, setNewlastName] = useState(lastname);

  var token = getToken();
  console.log("Inside Update User Component");

  const [updateUser,{loading,data,error}] = useMutation(UPDATE_USER_DETAILS,{
    headers: {
      Authorization: token ? `Bearer ${token}` : ''}
    })
  if (loading) return <ScreenLoader/>
  if (error){
    console.log(error);
    return <Text>Error...</Text>
  } 
 
  console.log(data);

  return (
    <KeyboardAvoidingView style={styles.container} behavior='padding' enabled>
      <ScrollView>
      <View style={{ paddingTop: 36 }}>
        <Input type="text" value={newfirstName} onChange={e => setNewfirstName(e.target.value)} />
      <View style={{ paddingTop: 10 }}>
        <Input type="text" value={newlastName} onChange={e => setNewlastName(e.target.value)}/>
      </View>
      <TouchableHighlight underlayColor='#fff' onPress={() => updateUser({ variables: { "input": {"firstName": newfirstName,"lastName": newlastName }} })} >
        <View style={{ paddingTop: 50 }}>
          <View style={styles.buttonLayout}>
            <Text style={styles.buttonText}>Save Changes</Text>
          </View>
        </View>
      </TouchableHighlight>
      </View>
      </ScrollView>
    </KeyboardAvoidingView>
  )
}



const width = Dimensions.get('window').width;

class AccountSettings extends Component {

  render() {

    return (
      <View style={{ flex: 1 }}>
        <TopHeader text='Account Settings'/>
        <UpdateUserComponent/>
      </View>
    );
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingTop: 20,
},
buttonLayout: {
    backgroundColor: '#C5C5C5',
    width: width * 85 / 100,
    height: 45,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
},
buttonText: {
    color: '#919191',
    fontSize: 14

},
  

})


export default AccountSettings;

更新:

从表单输入元素获取值时出现一些错误。如果我直接赋值它正在更新。例如：- 如果我在按下按钮时使用此语句，则数据会在服务器上更新。

onPress={() => UpdateUser({ variables: { "input": {"firstName": "Prabhu","lastName": "Visu" }} }) }

请帮我解决这个问题，让它动态工作。谢谢.!

Answer 1

替换为：

  *onChange={e => setNewfirstName(e.target.value)}*

有了这个：

  *onChangeText={text => setNewfirstName(text)}*

它会起作用的。！

使用 Mutation hook 更新 Graphql 服务器中的数据

Using Mutation hook to update data in Graphql server

javascript

reactjs

graphql

react-native

graphql-mutation