How to add my subscription data to update my previous query

I have one query and one subscription, what I am trying to do is add my data to previous query so that it shows the full list.

I have one query which is returning me list of students and I am rendering that on UI like below

    function Test(props) {
    const { loading, data: dta } = useQuery(GETSTUDENTS);
    const { data: d } = useSubscription(GETSUBSTUDENTS, {
        onSubscriptionData: ({ subscriptionData: { data } }) => {
            let fname = data.getSubStudent.fname;
            let lname = data.getSubStudent.lname;
            dta.getStudents.push({ fname, lname });
        },
    });

    return (
        <div className="">
            {dta &&
                dta.getStudents.map((li) => {
                    <div>
                        <p>{li.fname}</p>
                        <p>{li.lname}</p>
                    </div>;
                })}
        </div>
    );
}

export default Test;

But the main issue is the above one is not updating the cache so when I change the routes and come bqack again it takes the previous data only.

So What I wnat to know na what is the best way to do this, I have check subscribeToMore also but did not get idea How to implement that and how it works with hooks.

I am getting some data from subscription and on that basis I want to change some other part so can I use refetchQueries I did not found any good tutorial which uses hooks (react-apollo-hooks) using qraphql

from How to add my subscription data to update my previous query