1
votes

I am developing an application with React-Native and using GraphQL as REST in the server-side. I have authentication layer in my application and I would like to achieve reading data that I got from the mutation query from the server.

This is signIn method passed to props :

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})
                }
            }),
    }),
});

This is my signIn mutation :

import gql from 'graphql-tag';

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

I am saving authentication token inside the AsyncStorage from React-Native library. What I would like to do is fetching userInformation from the store. I do not have any problem reading root queries from the cache store.

I looked at deep of client props provided by Apollo-client. I can see the user data inside there. It is under some property called ROOT_MUTATION under the store. ( I can share the props data )

I am using readQuery but it throws a warning for "Missing field in currentUser in { "id" : "……..", "email":"asdasds","name":"ajdasdasd","jwt":token

It still does not insert currentUser query to the ROOT_QUERIES to the props.client.

Do you have an idea about how to achieve this goal ?

1
The question is updated since I had progress a little bit after reading docs.ozercevikaslan

1 Answers

2
votes

Finally, I have achieved my goal. Here the methods I have used :

First method is the signIn mutation :

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}})
                }
            }),
    }),
});

And somewhere in your code ; you can read data from the store, the user in this case, in the way at below :

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);
        }