How to pass variables to GraphQl Query in react native

Question

I am new to React Native and Apollo GraphQL, trying to insert props values to the following to code run the GraphQL query.

    import React, { useState, useEffect } from 'react';

import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';

import { Text, StyleSheet, View, Image } from 'react-native';
import CustomTextInput from '../component/CustomTextInput';
import CustomButton from '../component/CustomButton';
import { Resources } from '../styles/index';
import { useFonts } from '@use-expo/font';
import { AppLoading } from 'expo';
import { USER_NAME, PASSWORD } from '../types/types';

const SIGN_IN = gql`
  query SingIn($email: String!, $password: String!) {
    signInUser(email: $email, password: $password) {
      session
      username
    }
  }
`;

const LoginScreen = (props) => {
  //how to pass values to variables?

  let [fontsLoaded] = useFonts({
    'Gilroy-Heavy': require('../../assets/fonts/gilroy_heavy.otf'),
    'Gilroy-Bold': require('../../assets/fonts/gilroy_bold.otf'),
    'Gilroy-Regular': require('../../assets/fonts/gilroy_regular.otf'),
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else {
    return (
      <View>
        <Image style={styles.logoStyle} source={Resources.logo} />
        <Text style={styles.loginTitleStyle}>Come on{'\n'}board.</Text>
        <Text style={styles.signInStyle}>Sign in.</Text>
        <View style={styles.customInputStyle}>
          <CustomTextInput type={USER_NAME} hint='Email Address' />
        </View>
        <View style={styles.customInputStyle}>
          <CustomTextInput type={PASSWORD} hint='Password' />
        </View>
        <View style={styles.customButtonStyle}>
          <CustomButton
            title='Sign in'
            onPressed={(email, password) => {
              // getLogin();
              // props.navigation.navigate('Pin');
            }}
          />
        </View>
        <Text style={styles.forgottenPasswordStyle}>Forgotten password?</Text>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  logoStyle: {
    marginStart: 30,
    marginTop: 70,
  },
  loginTitleStyle: {
    fontFamily: 'Gilroy-Heavy',
    fontSize: 36,
    marginTop: 136,
    marginStart: 30,
  },
  signInStyle: {
    fontFamily: 'Gilroy-Heavy',
    fontSize: 24,
    marginStart: 20,
    marginTop: 43,
  },
  customInputStyle: {
    marginHorizontal: 20,
    marginTop: 18,
  },
  customButtonStyle: {
    marginTop: 15,
  },
  forgottenPasswordStyle: {
    fontFamily: 'Gilroy-Regular',
    fontSize: 13,
    marginTop: 30,
    alignSelf: 'center',
  },
});

// export default LoginScreen;

export default graphql(
  gql`
    query SignInUser($email: String!, $password: String!) {
      signInUser(email: $email, password: $password) {
        session
        username
      }
    }
  `,
  {
    props: ({ options }) => ({
      signInUser: (email, password) =>
        options({ variables: { email, password } }), //how to provide values to variables from //LoginScreen(..) function
    }),
  }
)(LoginScreen);

I am unable to pass values to the variables.

I am following these tutorials and resources. So far I have not found any relevant example which shows to how to pass the values to the variable. I have tried using useQuery it works but when I call it on the onPress it gives error.

Answer 1

I end up using useLazyQuery to solve the issue.

Here how it is done:

const [signInUser, { loading, error, data }] = useLazyQuery(SIGN_IN);

and calling the signInUser on button's onPress like this

<View style={styles.customButtonStyle}>
              <CustomButton
                title='Sign in'
                onPressed={() => {
                  getLogin();
                }}
              />
            </View>

I am using CustomButton same can be done for any Click event method.

Answer 2

You will have to use the 'useMutation' hook provided by apollo

the code would be be like below

const [signInUser, { data }] = useMutation(SIGN_IN);

In your onPress or any event

signInUser({ variables: { email, password } });

You can see the reference here https://www.apollographql.com/docs/react/api/react-hooks/#usemutation