Wie man Apollo Client richtig in React Native einbindet

Question

Ich habe das in den letzten paar Stunden recherchiert, und ich bin jetzt sehr nahe daran, das zu lösen. Alles scheint jetzt zu funktionieren, aber ich habe kein this.props.mutate in meiner Komponente, die das Apollo HOC hat, das es einwickelt.

Ich verdrahtete Apollo als Reducer, also in meiner Komponente würde ich erwarten, this.props.apollo.mutate zur Verfügung zu sehen, aber es ist nicht da.

Dies alles ist, was zur Zeit zur Verfügung gestellt werden scheint:

console.log (this.props.apollo)

{"data":{},"optimistic":[],"reducerError":null} 

Hier ist, wie es angeschlossen:

./src/apolloClient.js

./src/reducers.js

import client from './apolloClient' 

export default combineReducers({ 
    apollo: client.reducer(), 
    nav: navReducer, 
    signup: signupReducer, 
    auth: loginReducer, 
}) 

./src/App.js

import store from './store' 
import client from './apolloClient' 

const Root =() => { 
    return (
     <ApolloProvider store={store} client={client}> 
      <RootNavigationStack /> 
     </ApolloProvider> 
    ) 
} 

export default Root 

Oh, und hier ist der Grund meiner Anmeldung Komponente (auch ziemlich Hälfte -baked):

export default compose(
    connect(mapStateToProps, { 
     initiateLogin, 
     toggleRememberMe 
    }), 
    withFormik({ 
     validate, 
     validateOnBlur: true, 
     validateOnChange: true, 
     handleSubmit: ({ tel, password }, { props }) => { 
      props.apollo.mutate({ 
        variables: { tel, password } 
       }) 
       .then((res) => { 
        alert(JSON.stringify(res)) 
        //const token = res.data.login_mutation.token 
        //this.props.signinUser(token) 
        //client.resetStore() 
       }) 
       .catch((err) => { 
        alert(JSON.stringify(err)) 
        //this.props.authError(err) 
       }) 
      //props.initiateLogin({ tel, password }) 
     } 
    }), 
    graphql(LOGIN_MUTATION, { options: { fetchPolicy: 'network-only' } }) 
)(LoginForm) 

Es fühlt sich an, als ob ich eine Tat brauche ion creator und um es manuell zu meiner Komponente zuzuordnen. Was muss ich tun, um diese lose gezeigte Mutation auszuführen LOGIN_MUTATION onSubmit?

Ich bin derzeit verwirrt durch die Tatsache this.props.apollo hat Apollo Daten drin, aber es gibt keine mutate.

Ich sehe die Lösung hier nicht: http://dev.apollodata.com/react/mutations.html oder vielleicht tue ich - muss ich das betrachten?

Ich möchte es an den Punkt bringen, wo die Komponente die Mutation aufrufen kann, wenn es nötig ist. Ich möchte auch, dass es unter this.props.something verfügbar ist, also kann ich es von der handleSubmit-Funktion von Formik aufrufen, aber ich bin offen für Vorschläge, die die beste deklarative Skalierbarkeit ermöglichen.

[Bearbeiten] Hier ist der Code, den ich gelöst lege mir:

./src/apolloClient.js

Diese Datei wurde verschrottet.

./src/reducers.js

entfernte ich das Apollo Minderer und Client-Referenz.

./src/App.js

Ich habe den Apollo-Client in der Root-Komponente. Ich habe diese Technik von Nader Dabits Medium Post bekommen. Er verdeutlicht dies in einem GitHub Repo:

• https://github.com/react-native-training/apollo-graphql-mongodb-react-native
• https://medium.com/react-native-training/react-native-with-apollo-part-2-apollo-client-8b4ad4915cf5

Hier ist, wie es umgesetzt aussieht:

const Root =() => { 
    const networkInterface = createNetworkInterface({ 
     uri: 'http://localhost:8000/graphql', 
     opts: { 
      credentials: 'same-origin', 
      mode: 'cors' 
     } 
    }) 

    networkInterface.use([{ 
     async applyMiddleware(req, next) { 
      try { 
       if (!req.options.headers) req.options.headers = {} 
       const token = await AsyncStorage.getItem('token') 
       req.options.headers.authorization = token || null 
       next() 
      } catch (error) { 
       next() 
      } 
     } 
    }]) 

    const client = new ApolloClient({ 
     networkInterface, 
     dataIdFromObject: (o) => o.id 
    }) 

    return (
     <ApolloProvider store={store} client={client}> 
      <RootNavigationStack /> 
     </ApolloProvider> 
    ) 
} 

export default Root 

Answer 1

Wenn Sie compose, die Reihenfolge der HOV Angelegenheiten . In Ihrem Code sind die Requisiten, die von Ihrem ersten HOC (connect) hinzugefügt wurden, für alle HOCs nach diesem Code verfügbar (withFormik und graphql). Die von withFormik hinzugefügten Stützen sind nur verfügbar unter graphql. Die Requisiten, die von graphql hinzugefügt werden, sind für keine der anderen zwei HOCs verfügbar (nur für die Komponente selbst).

Wenn Sie neu ordnen den Auftrag compose zu sein ->graphql ->withFormik dann sollten Sie den Zugriff auf props.mutate innerhalb withFormik haben.

Zusätzlich können Sie, während Sie Redux und Apollo integrieren können, dies alles verhindern, dass Sie zwei separate Geschäfte haben. Die Übergabe eines bestehenden Geschäfts an Apollo wird die API für die graphql HOC nicht ändern. Das heißt, unabhängig davon, welches Geschäft Sie verwenden, wenn Sie die HOC korrekt verwenden, erhalten Sie immer noch eine data Prop (oder eine mutate Prop für Mutationen).

Während die Integration von Apollo mit Redux den Apollo-Speicher für Ihre Anwendung freigibt, sollten Sie Apollo wie gewohnt verwenden. In den meisten Fällen bedeutet das die Verwendung der graphql HOC und die Verwendung data.props und data.mutate (oder wie immer Sie diese Requisiten nennen, wenn Sie einen Namen über Optionen übergeben).

Wenn Sie den Apollo-Client direkt anrufen müssen, verwenden Sie stattdessen withApollo - dies zeigt eine client Prop, die Sie dann verwenden können. Die apollo Prop, die connect in Ihrem Code exponiert ist nur das Geschäft von Apollo verwendet - es ist nicht der eigentliche Client, so dass es keine Methoden wie mutate zur Verfügung haben wird. In den meisten Fällen gibt es jedoch keinen Grund, mit withApollo über graphql zu gehen.