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

Question

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

And its rendering twice on 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;

Answer 1

It seems like you need to execute query when button is clicked, instead of executing it instantly. That behavior can be implemented by using lazy query .

Try something like this:

../../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])

Answer 2

You don't call the Query inside handleClick function directly you have to declare only inside the main function after that you have to use.

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

Then you can call inside the handleClick function

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