Как обновить запрос по нажатию кнопки без зацепки

Question

У меня есть компонент с кнопкой ввода. Я хочу получить информацию с сервера GraphQL и обновить входную информацию. Но мой код не меняет запрос graphql, и у меня тот же результат. Не могли бы вы помочь мне? Я попытался найти некоторую информацию в руководстве - https://www.apollographql.com/docs/react/data/queries/, но есть только useLazyQuery, и я хочу сделать это без хуков.

function User() {
    let r = `query ~ first query`;

    function handleClick() {
        r = `query ~ updated query`;
    }


    return (
        <Query<UserDetails, Variables>
            query={gql([r])}>

            {({data}) => {
                let res = '';
                if (data && data.me && data.me.name) {
                    res += `${data.me.name} `;
                }

                return (
                    <span>
                        <form onSubmit={e => {
                                e.preventDefault();
                                handleClick();}}>
                            <button type="submit">Add Todo</button>
                            <input type="text" value={res}/>
                        </form>
                    </span>
                );
            }}
        </Query>
    );
}