Question

你好，我对React-Apollo有问题。

当我将fetchPolicy设置为缓存并联网时，我的Apollo每次都会发出新请求，并且不会从缓存中加载数据。

如果结果与缓存数据不同，我希望Apollo首先从缓存中加载数据，然后发出请求，然后更新数据并重新加载Component。

const client = new ApolloClient({
    connectToDevTools: true,
    cache,
    link: ApolloLink.from([
        stateLink,
        new HttpLink({
            uri: "..."
        })
    ]),
});

query user($userId: String) {
    user(_id: $userId) {
        __typename
        _id
        fullname
        username
        followed_by_viewer
        follows_viewer
        edge_followed_by {
            count
        }
        edge_follow {
            count
        }
    }
}

<Query query={GET_USER} variables={{ userId }} fetchPolicy={"cache-and-network"} partialRefetch={false} >
{({ data, loading, error, refetch }) => {

        if (error) return <Text>Error</Text>
        if (loading) return <Text>Loading</Text>

        let user = data.user;

        console.log(user);

        return (
            <ScrollView
                refreshControl={
                    <RefreshControl
                        refreshing={loading}
                        onRefresh={refetch}
                    />
                }>

                <View style={[s.gradientBar, { backgroundColor: profileColor }]} />

                <View style={s.nameInfos}>
                    <Text style={s.fullname}>{user.fullname}</Text>
                    <Text style={s.name}>@{user.username}</Text>
                </View>



            </ScrollView>
        )
    }}

</Query>

Answer 1

使用_id和__typname定义的对象应该以规范化形式正确缓存。您可以使用react dev工具检查缓存详细信息/状态/内部（数据存储）（确定为100％确定）。

如果结果与缓存数据不同，我希望Apollo首先从缓存中加载数据，然后发出请求，然后更新数据并重新加载Component。

首先缓存是默认策略。

使用refetch（作为刷新）是恕我直言，它会强制网络请求-它是现有<Query/>状态/进程的一部分，而不是单独的动作。缓存（仅）将被使用（无网络请求）当另一个实例或其他组件请求相同的数据范围（查询，变量）时。

<Query/>组件创建一个可观察的对象，将在缓存数据更新时自动刷新（例如，在从另一个组件发生突变之后）。

反应来自缓存的Apollo加载数据，然后发出请求

1 个答案: