Apollo GraphQL - 如何从缓存存储中获取突变记录的数据？答案

【问题标题】：Apollo GraphQL - How to get data recorded by mutation from the cache store?Apollo GraphQL - 如何从缓存存储中获取突变记录的数据？
【发布时间】：2018-07-14 12:05:36
【问题描述】：

我正在使用 React-Native 开发一个应用程序，并在服务器端使用 GraphQL 作为 REST。我的应用程序中有身份验证层，我想读取从服务器的变异查询中获得的数据。

这是传递给 props 的 signIn 方法：

const login = graphql(LoginMutation, {
    props: ({ mutate }) => ({
        login: (user) =>
            mutate({
                variables: { email: user.email, password: user.password },
                refetchQueries: [{ query: fetchShop }],
                update: (proxy, { data: { signIn } }) => {

                    console.log("USSER : " + JSON.stringify(signIn))

                    const query = gql`
                        {
                            currentUser {
                                id
                                email
                                jwt
                                __typename
                            }
                        }
                    `;
                    try {
                        proxy.writeQuery({ query: query, data: signIn })
                    } catch (error) {
                        console.log("Error occured due to the followig error at write query : "+error)
                    }

                    //data.user.push(mutationResult.signIn);
                    //proxy.writeQuery({query,data})
                }
            }),
    }),
});

这是我的登录突变：

import gql from 'graphql-tag';

export default gql`
mutation SignIn($email : String!,$password : String!){
    signIn(email : $email, password : $password){
        id
        email
        name
        jwt
    }
}
`;

我将身份验证令牌保存在来自 React-Native 库的 AsyncStorage 中。我想做的是从商店获取用户信息。我从缓存存储读取根查询没有任何问题。

我深入研究了 Apollo-client 提供的客户端道具。我可以在那里看到用户数据。它位于商店下的某个名为 ROOT_MUTATION 的属性下。（我可以分享道具数据）

我正在使用 readQuery，但它会针对“{ "id" : "……..", "email":"asdasds","name":"ajdasdasd","jwt" 中的 currentUser 中缺少字段发出警告：令牌

它仍然没有将 currentUser 查询插入到 props.client 的 ROOT_QUERIES。

您对如何实现这一目标有想法吗？

【问题讨论】：

问题已更新，因为我在阅读文档后有了一点进步。

标签： javascript react-native graphql react-apollo apollo-client

【解决方案1】：

终于，我实现了我的目标。这里是我用过的方法：

第一种方法是signIn突变：

const login = graphql(LoginMutation, {
    props: ({ mutate }) => ({
        login: (user) =>
            mutate({
                variables: { email: user.email, password: user.password },
                refetchQueries: [{ query: fetchShop }],
                update: (proxy, { data: { signIn } }) => {

                    console.log("USSER : " + JSON.stringify(signIn))

                    const query = gql`     {                 
                            user{
                                id
                                email
                                jwt
                                __typename
                            }
                        }
                    `;
                    proxy.writeQuery({query : query , data : {user : signIn}})
                }
            }),
    }),
});

在你的代码中的某个地方；您可以通过以下方式从商店（在这种情况下为用户）读取数据：

const { client } = this.props;
        console.log(client.store);

        try {
            const { user } = client.readQuery({
                query: gql`
                {
                    user{
                        id
                        email
                        name
                        __typename
                    }
                }
                `
            })
            console.log("User : "+JSON.stringify(user))
        
        } catch (error) {
            console.log("Error occured at reading user from the cache due to the following err : " + error);
        }

【讨论】：