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

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

0 голосов
/ 28 апреля 2019

Я пытаюсь внедрить функцию поиска в свою систему управления, используя React-Hooks и GraphQL-Apollo Client.Хотя интерфейс отображается успешно, когда я нажимаю кнопку «Поиск», появляется ошибка с именем:

Недопустимый вызов ловушки.Хуки могут быть вызваны только внутри тела компонента функции.

Я почти уверен, что useQuery вызывается внутри функции, поэтому я не понимаю, что это будет вызывать.Другая функция, такая как отображение всех пользователей и добавление новых пользователей, работает нормально.

Я пробовал несколько способов реализовать функцию поиска и искать в Интернете, но все еще не мог ее решить.Я впервые сталкиваюсь с React-Hooks.

Вот мой текущий код в searchUser компоненте 

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

const SearchUserForm = () => {
    let name = '';
    let content;

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();
                const { data, loading, error } = useQuery(searchUserQ, {
                    variables: { name: name },
                    suspend: false
                });

                if (loading) {
                    content = <p>Loading User...</p>
                }

                if (error){
                    console.log(`Error Occur: ${ error }`);
                    content = <p>Error Occur!</p>
                }

                content = data.users.map(user => (
                    <p key={user.id}>Username: {user.name}    ID: {user.id}</p>
                ));
            }}>
                Submit
            </button>
            <p>{ content }</p>
        </div>
    </div>
)
}

export default SearchUserForm;

Может ли кто-нибудь помочь с этим?

Еще один вопрос заключается в том, что мой data, кажется, возвращаетсяundefined каждый раз, когда я выполняю запрос.Что-то не так с моим запросом?Вот запрос: 

const searchUserQ = gql`
query User($name: String!){
    user(name: $name){
        id
        name
        email
    }
 }
`;

Спасибо и ценим на помощь!

Ответы [ 2 ]

1 голос
/ 28 апреля 2019

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

Не вызывайте хуки из обычных функций JavaScript.Вместо этого вы можете:

✅ Вызвать зацепки из компонентов функций React.

✅ Вызовите хуки из пользовательских хуков (мы узнаем о них на следующей странице).

Если вам нужно вручную вызвать запрос вручную в ответ на событие, используйтеклиент 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)
        ...
      }} />
0 голосов
/ 29 апреля 2019

Я обнаружил проблему со своим вторым ответом, следует просто обернуть оператор 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;
...