如何在本机反应中将变量传递给GraphQl Query

Question

我是 React Native 和 Apollo GraphQL 的新手，尝试将 props 值插入以下代码以运行 GraphQL 查询。

    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);

我无法将值传递给变量。

我正在关注这些tutorials 和resources。到目前为止，我还没有找到任何相关示例来说明如何将值传递给变量。 我尝试过使用useQuery，它可以工作，但是当我在onPress 上调用它时会出错。

Answer 1

我最终使用useLazyQuery 来解决问题。

这里是怎么做的：

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

并像这样在按钮的onPress 上调用signInUser

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

我正在使用CustomButton，任何 Click 事件方法都可以这样做。

Answer 2

你必须使用 apollo 提供的 'useMutation' 钩子

代码如下所示

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

在您的 onPress 或任何活动中

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

您可以在此处查看参考 https://www.apollographql.com/docs/react/api/react-hooks/#usemutation