How do I refetch GraphQL query during refreshing the page properly?

Question

I'm creating an app with sign up, sign in and content pages (React + ApolloClient)

When I sign up, app pushes me on the content page, everything is ok and I can see who is current user in the system. But when I refresh the page mistake comes in and shows that current user is undefined. In that case I suppose that I need to refetch my query before inizialization of the content component.

How do I need to do that using useEffect hook?

After refreshing the page I want to see what information I got from current user query in the console but see undefined. However in the network I see that query returns me information about current user. Why does it happen?

Code for content (Pages component):

const Pages = ({ handleSetAuthorized}) => {
  const { data } = useQuery(CURRENT_USER)
  console.log(data)
  const { data: list } = useQuery(PROCESS_LIST)
  const [text, setText] = useState('Сохранить')
  const [clicked, setClicked] = useState(false)
  const { error } = useSelector(({ error }) => error)
  const dispatch = useDispatch()

  const [editUser] = useMutation(EDIT_CURRENT_USER, {
    onCompleted: data => {
      if(data.editUser) {
        setText('Сохранено...')
        setTimeout(() => {
          setText('Сохранить')
        }, 3000)
      }
    },
    onError: error => dispatch(getError(error))
  })

  const edit = (values) => {
    editUser({
      variables: {
        id: data.currentUser.id,
        firstName: values.firstName,
        secondName: values.secondName,
        email: values.email,
        password: values.password,
      }
    })
  }

  const handleToggleMenu = () => {
    setClicked(!clicked)
    dispatch(cleanError())
  }

  const signOut = () => {
    localStorage.removeItem("token")
    handleSetAuthorized()
  }

  return (
    <div className="pages">
      <PagesToggleMenu 
        clicked={clicked} 
        toggleMenu={handleToggleMenu}
        data={data}
        signOut={signOut}
      />
      <PagesMenu toggleMenu={handleToggleMenu}/>
      <Col style={{padding: "0 22px"}}>
        <div className="pages__content">
          <Switch>
            <Route path="/pages/edituser">
              <PagesUser
                text={text}
                onSubmit={edit} 
                data={data}
                initialValues={{
                  firstName: data.currentUser.firstName,
                  secondName: data.currentUser.secondName,
                  email: data.currentUser.email,
                }}
              />
            </Route>  
            <Route path="/pages/process">
              {list
                ? 
                  list.processList.map((list) => 
                    <Process key={list.id} list={list}/>
                  )
                :
                  null
              }
            </Route>  
          </Switch>
          {error &&
            <ErrorMessage className="mistake mistake--edit">
              {error.message}
            </ErrorMessage>
          }  
        </div>
      </Col>
    </div>
  )
}

export default Pages