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

Question

Actually I am new to React Native. In my recent project, I have faced an issue while using useMutation hook for updating the data in my server. I have attached the file in which I am using it.

For your reference, I have attached the screenshot of the playground.

Note:- I am not getting an error and the values are not updated in the server. If I click on the button. It is not required to refetch it and display the info using a query, just an update would be enough.

Mutation structure :

.

graphql request sent :

 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;

Update :

There is some error in getting the values from Form Input Elements. If I assign values directly it is updating. For Example:- if I use this statement on button press, the data is updated on the server.

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

Please help me in fixing this issue, making it work dynamically. Thanks .!

Answer 1

Replace This:

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

With This:

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

It will be working.!