在React-Native上使用Apollo

Question

我想在使用react-apollo的React-Native App上使用GraphQL API。

我的服务器端API是功能性的。我的所有测试与游乐场完美地工作。

另一方面，由于react-native的事情变得复杂：如何重用服务器端设置的东西？尤其是突变）我必须重复GraphQL代码吗？

我使用CodeGen（伟大的工具！）导出了我的schema graphql，但如何在react-native上使用它？

我的配置在React-Native上。

const httpLink = createHttpLink({
  uri: API_GRAPHQL_URL,
  clientState: {
    typeDefs
  }
});

const getToken = async () => await AsyncStorage.getItem('userToken');

const authLink = setContext(async (_, { headers }) => {
  const token = await getToken();

  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ''
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

我的typeDefs是在CodeGen上导出的模式，例如。

But, how use Mutation with my exported configuration ? 我使用 react-apollo-hooks.

GraphQL的客户端部分对我来说不是很清楚，尽管有很大的反应-apollo文档。

有谁能帮助我或有关于这个主题的参考文章吗？

非常感谢你！我想在React上使用GraphQL API。

Answer 1

为了重用，你可以创建一个schema.js文件，并从那里导出你的查询到相关的屏幕，关于Mutations这里是一个使用Mutation的注册页面的例子。

import React, {useState, useContext} from 'react'
import { Text,TextInput, View, StyleSheet, PixelRatio, ImageBackground, SafeAreaView, ScrollView, Image, Button, TouchableOpacity, Platform,Switch} from 'react-native'
import Icons from 'react-native-vector-icons/Ionicons'
import { useNavigation } from '@react-navigation/native';
import FormInput from '../components/FormInput';
import FormButton from '../components/FormButton';
import { useApolloClient, useMutation, useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';
import Header  from '../components/Header';


const SIGNUP_USER = gql`
 mutation SignupMutation($email: String!, $password: String!, $name: String!) {
   signupWithEmail(email: $email, password: $password, name: $name) {
     user {
        email
        name
     }
   }
}
 `

function SignUp (){

 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');

 const client = useApolloClient();
 const [signupWithEmail] = useMutation(SIGNUP_USER);

 const navigation = useNavigation();


return (

<View style={styles.container}>



<ScrollView  contentContainerStyle={styles.contentContainer}>

<Header />

<View style={styles.welcomeContainer}>

</View>





<View style={{justifyContent: 'center', alignItems: 'center'}}>


<FormInput
  labelName='Email'
  value={email}
  autoCapitalize='none'
  onChangeText={email => setEmail(email)}
/>

<FormInput
  labelName='Password'
  placeholderTextColor='#ED6A24'
  value={password}
  secureTextEntry={true}
  onChangeText={password => setPassword(password)}
/>


<FormButton
  title='Signup'
  modeValue='contained'
  color='#2D374F'
  labelStyle={styles.loginButtonLabel}
  onPress={() => signupWithEmail({variables: {email, password}})}
/>


<FormButton
  title='continue to sign in'
  marginTop='50'
  modeValue='contained'
  color='#2D374F'
  labelStyle={styles.loginButtonLabel}
  onPress={()=> navigation.navigate('SignIn')}
/>


<TouchableOpacity  style={{marginTop:40}}onPress={()=> navigation.navigate('Privacy')}>
<Text style={{fontSize: 20,color:"#2D374F"}}>privacy policy</Text>
</TouchableOpacity>

<TouchableOpacity  style={{marginTop:40}}onPress={()=> navigation.navigate('BottomTabsNavigator')}>
<Text style={{fontSize: 20,color:"#2D374F"}}>continue as guest</Text>
</TouchableOpacity>





</View>

</ScrollView>


</View>
);
}


export default SignUp;

你的服务器端的解析器应该是这样的，请注意这里使用的是firebase。

      Mutation: {
        signupWithEmail: async (_, { email, password, id, name }) => {
        var user = firebase.auth().createUserWithEmailAndPassword(email, password).then(cred => {
        return firebase.firestore().collection('USERS').doc(cred.user.uid).set({
          email
          })
        })
        return { user } // make sure your function returns a value like {user} here.
      },

你的模式应该是这样的。

type Mutation {
    signupWithEmail(email: String!, password: String!): AuthPayload!
  }

  type User {
    uid : ID!
    email: String!
  }


  type AuthPayload {
   user: User!
 }