Apollo 客户端：如何对自定义事件执行查询答案

【问题标题】：Apollo client: how to execute a query on custom eventApollo 客户端：如何对自定义事件执行查询
【发布时间】：2020-10-22 23:11:21
【问题描述】：

无效的钩子调用。 Hooks 只能在函数组件的主体内部调用。这可能是由于以下原因之一：

您可能有不匹配的 React 版本和渲染器（例如 React DOM）

您可能违反了 Hooks 规则

您可能在同一个应用中拥有多个 React 副本

它在handleclick上渲染两次。

import React, {
  useMemo,
  useState,
  useReducer,
  useEffect,
  useCallback,
  Fragment,
} from 'react';

import getAllFaqs from './faqQuery.graphql';
import getFaqById from './getFaqById.graphql';

import FaqTabIndex from './faqTabIndex';
import FaqCategoryList from './faqCategoryList';

import { useFaq } from '../../peregrine/talons/Faq/useFaq';
import { useFaqById } from '../../peregrine/talons/Faq/useFaqById';

const Faq = (props) => {
  const [faq, setFaq] = useState([]);
  const [faqCategory, setFaqCategory] = useState([]);
  const talonProps = useFaq({
    query: getAllFaqs,
  });
  const { data, error, loading } = talonProps;

  useEffect(() => {
    const tempData = { ...data };
    setFaq([...tempData.faq]);
    setFaqCategory([...tempData.faqCategoryList]);
  }, []);

  const handleClick = (catId) => {
    const talonProps = useFaqById({
      query: getFaqById,
      id: catId,
    });
    const { data, error, loading } = talonProps;

    console.log('====great data', data);
    useEffect(() => {
      const tempData = { ...data };
      setFaq([...tempData.faq]);
    }, [data]);
  };

  const faqList = faq.length ? (
    <FaqTabIndex items={faq} />
  ) : null;
  const catalog = faqCategory ? (
    <FaqCategoryList
      items={faqCategory}
      handleClick={handleClick}
    />
  ) : (
    nul
  );

  console.log('Thank Faq', faq);
  console.log('Thank Category ', faqCategory);
  return (
    <Fragment>
      {faqList}
      {catalog}
    </Fragment>
  );
};

export default Faq;

【问题讨论】：

您似乎正在修改 useEffect 中的状态，而不是应该在事件处理程序中触发状态更新
看起来，useFaqById 是一个钩子，你在 handleClick 中使用它， useEffect 也不应该在 handleClick 里面，这可能是你得到错误的原因
为什么useEffect在handleClick里面，这可能是错误的原因。
是的 useFaqById 是一个钩子，使用钩子 useQuery 并返回一个承诺。我想通过 handleclick 更新我的状态。
不要在处理程序中初始化钩子。挂钩必须在任何条件之前初始化一次。

标签： javascript reactjs graphql react-hooks react-apollo

【解决方案1】：

似乎您需要在单击按钮时执行查询，而不是立即执行它。该行为可以通过使用lazy query 来实现。

试试这样的：

../../peregrine/talons/Faq/useFaqById.jsx


import { useLazyQuery } from '@apollo/react-hooks';
import getFaqById from 'path/to/getFaqById.graphql';
export const useFaqById = useLazyQuery(getFaqById);

Faq.jsx

const [fetchFaqById, {faqLoading, faqData}] = useFaqById;

const handleClick = (catId) => {
   fetchFaqById({
      variables: {
         id: catId
      }
   });
}

useEffect(() => {
   if (faqData) {
      setFaq([...faqData.faq]);
   }
}, [faqData])

【讨论】：

【解决方案2】：

你不直接在handleClick函数中调用Query，你必须只在main函数中声明，之后你必须使用。

import { useLazyQuery } from '@apollo/react-hooks';
import getFaqById from 'path/to/getFaqById.graphql';
const [useFaqById,{data}] = useLazyQuery(getFaqById);

然后就可以在handleClick函数里面调用了

const handleClick = (catId) => {
   useFaqById({
      variables: {
         id: catId
      }
   });
}

【讨论】：