Using Mutation hook to update data in Graphql server

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:

mutation structure .

graphql request sent:

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 .!

Do you see a graphql request going out in the network tab of your Dev Tools? Here you can most easily track if the request actually happens? When pressing on the TouchableHighlight, you should see a reaquest named "graphql" appear there. If not, the request is not even fired. — NewVigilante, Jan 07 '20 at 07:17
How I can find it , actually I am using Expo for running the app — Prabu visu, Jan 07 '20 at 07:19
I am not entirely sure for Expo since I have not used it, but I suspect you can just use your browsers Dev Tools while running Expo. Right click the page somewhere and it should say "Inspect Element" or "Inspect" or something similar. This will open a new window where you should see a tab "Network" which will show you all requests which are happening. — NewVigilante, Jan 07 '20 at 07:25
Yes, When I am pressing the button graphql request is send. I have added the image for your reference. — Prabu visu, Jan 07 '20 at 07:34
When you click on that specific request, you'll have access to view the actual response. There you should be able to see if everything is correct or not. If not, it will give you some kind of explanation about what is missing. The image looks from a query and not the actual mutation which you are trying to fire. — NewVigilante, Jan 07 '20 at 07:39
is headers a valid option for useMutation? usually when we want to integrate that behavior it's defined on the client definition. — Franrey Saycon, Jan 07 '20 at 07:49

score 0 · Accepted Answer · answered Jan 07 '20 at 09:31

0

Replace This:

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

With This:

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

It will be working.!

answered Jan 07 '20 at 09:31

Prabu visu

25
6

Using Mutation hook to update data in Graphql server

1 Answers1