如何在 React Native 中正确地将 Apollo 客户端连接到 Redux

Question

过去几个小时我一直在研究这个问题，现在我非常接近解决这个问题。现在似乎一切正常，但我的组件中没有 this.props.mutate 包裹它的 Apollo HOC。

我将 Apollo 连接为减速器，因此在我的组件中，我希望看到 this.props.apollo.mutate 可用，但它不存在。

这就是目前似乎提供的全部内容：

console.log(this.props.apollo)

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

以下是它的连接方式：

./src/apolloClient.js

import { AsyncStorage } from 'react-native'
import { ApolloClient, createNetworkInterface } from 'react-apollo'

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

// networkInterface is half baked as I haven't got this far yet
networkInterface.use([{
    async applyMiddleware(req, next) {
        if (!req.options.headers) req.options.headers = {}
        const token = await AsyncStorage.getItem('token')
        req.options.headers.authorization = token ? token : null
        next()
    }
}])

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

export default client

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

哦，这是我的登录组件的底部（也是半生不熟）：

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)

感觉就像我需要一个动作创建者并将其手动映射到我的组件。我需要做什么来运行这个松散显示的突变LOGIN_MUTATION onSubmit？

我目前对 this.props.apollo 中有 Apollo 的数据感到困惑，但没有 mutate。

我在这里没有看到解决方案：http://dev.apollodata.com/react/mutations.html 或者我看到了 - 这是我需要查看的内容吗？

const NewEntryWithData = graphql(submitRepository, {
  props: ({ mutate }) => ({
    submit: (repoFullName) => mutate({ variables: { repoFullName } }),
  }),
})(NewEntry)

我想让它达到组件可以在需要时调用突变的程度。我还希望它可以在 this.props.something 上使用，这样我就可以从 Formik 的 handleSubmit 函数中调用它，但我愿意接受能够实现最佳声明式可伸缩性的建议。

[编辑] 这是我正在考虑解决的代码：

./src/apolloClient.js

此文件已废弃。

./src/reducers.js

我删除了 Apollo reducer 和客户端引用。

./src/App.js

我将 Apollo Client 放在根组件中。我从 Nader Dabit 的 Medium 帖子中获得了这项技术。他在 GitHub 存储库中对此进行了说明：

• 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

下面是它的实现方式：

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

当您使用compose 时，您的 HOC 的顺序很重要。在您的代码中，您的第一个 HOC (connect) 添加的道具可供其后的所有 HOC (withFormik 和 graphql) 使用。 withFormik添加的道具只对graphql可用。 graphql 添加的 props 不适用于其他两个 HOC（仅组件本身）。

如果您将顺序重新排列为compose -> graphql -> withFormik，那么您应该可以在withFormik 中访问props.mutate。

此外，虽然您可以集成 Redux 和 Apollo，但这只是防止您拥有两个独立的商店。将现有存储传递给 Apollo 不会更改 graphql HOC 的 API。这意味着，无论您使用什么商店，当您正确使用 HOC 时，您仍然会得到一个 data 道具（或用于突变的 mutate 道具）。

虽然将 Apollo 与 Redux 集成确实会将 Apollo 的 store 暴露给您的应用程序，但您仍然应该像往常一样使用 Apollo。 在大多数情况下，这意味着使用 graphql HOC 并利用 data.props 和 @ 987654339@（或者如果你通过选项传入一个名称，那么你称之为这些道具的任何东西）。

如果您需要直接调用 Apollo 客户端，请改用 withApollo —— 这会公开一个 client 属性，然后您可以使用它。 connect 在您的代码中公开的 apollo 道具只是 Apollo 使用的商店——它不是实际的客户端，因此它不会有像 mutate 这样的方法可供使用。不过，在大多数情况下，没有理由选择 withApollo 而不是 graphql。