Как реализовать функцию поиска в React-GraphQL, используя React-Hooks и клиент Apollo?

Согласно Правила хуков:

Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components.

✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).

Если вам нужно вручную вызвать запрос вручную в ответ на событие, используйте клиент Apollo напрямую. Вы можете использовать useApolloClient, чтобы получить экземпляр клиента внутри вашего компонента:

const SearchUserForm = () => {
  const client = useApolloClient();
  ...
    return (
      ...
      <button onClick = {async (event) => {
        try {
          const { data } = client.query({
            query: searchUserQ,
            variables: { name: event.target.value },
          });
          // Do something with data, like set state
        catch (e) {
          // Handle errors
        }
      }} />

Вы также можете использовать useQuery, например:

const SearchUserForm = () => {
  const [name, setName] = useState('')
  const { data, loading, error } = useQuery(searchUserQ, {
    variables: { name },       
  });
  ...
    return (
      ...
      <button onClick = {async (event) => {
        setName(event.target.value)
        ...
      }} />

Я обнаружил проблему со своим вторым ответом, нужно просто обернуть оператор if перед его выполнением, вот полный код:

import React, {useState} from 'react'
import {useQuery} from 'react-apollo-hooks';
import {searchUserQ} from '../queries/queries';

const SearchUserForm = () => {

const [name, setName] = useState('');
const { data, error, loading } = useQuery(searchUserQ, {
    variables: { name }
});

let content;
let sName;

if (data.user !== undefined && data.user !== null) {
    if (loading) { content = 'Loading User...' }

    if (error) { content = `Error Occur: ${error}` }

    const user = data.user;
    content = `Username: ${ user.name }    ID: ${ user.id }`
}

return (
    <div id = "edit-user">
        <div className = "field">
            <label htmlFor = "name">Search UserName</label>
            <input type = "text" id = "name" onChange = {(event) => {
                sName = event.target.value;
            }}/>
            <button onClick = {(event) => {
                setName(sName);
            }} value = {name}>
                Search
            </button>
        </div>
        <div>
            <p>{ content }</p>
        </div>
    </div>
)

};

export default SearchUserForm;

Вы можете использовать метод использоватьLazyQuery и предоставить свой объект данных всему компоненту.

import {useLazyQuery} from '@apollo/react-hooks';
// - etc. -

const SearchUserForm = () => {
 // note: keep the query hook on the top level in the component
 const [runQuery, { data, loading, error }] = useLazyQuery(searchUserQ);

 // you can now just use the data as you would regularly do: 
 if (data) {
   console.info(data);
 }

 return (
   <div id = "edit-user">
     <div className = "field">
        <label htmlFor = "name">Search UserName</label>
        <input
          type = "text"
          id = "name"
          onChange = {(event) => {name = event.target.value }} />
        <button onClick = {
          (event) => {
            event.preventDefault();
            // query is executed here
            runQuery({
              variables: { name }, // note: name = property shorthand
              suspend: false
            })
          }}>
          // - etc. -
 );
}

В отличие от использовать запрос, метод использоватьLazyQuery будет выполняться только по клику.

В тот момент, когда вы можете передать значение «имя» в качестве параметра.

Если, например, вместо этого вы будете использовать использовать запрос и у вас есть параметр, который требуется в вашем запросе (например, String!), метод useQuery выдаст вам ошибку. Потому что при рендеринге компонента он попытается запустить этот запрос напрямую без обязательного параметра, потому что в этот период времени он еще недоступен.