반응 쿼리:사용방법버튼 클릭 시 쿼리

반응 쿼리:사용방법버튼 클릭 시 쿼리

이 리액트 쿼리 라이브러리는 처음입니다.

데이터를 가져오려면 이 라이브러리를 사용하여 다음과 같은 작업을 수행할 수 있습니다.

const fetchData = async()=>{...}

// it starts fetching data from backend with this line of code
const {status, data, error} = useQuery(myKey, fetchData());

그건 효과가 있다.하지만 버튼을 클릭했을 때만 데이터 가져오기를 트리거하려면 어떻게 해야 합니까? , 다음과 같은 작업을 수행할 수 있습니다.<Button onPress={() => {useQuery(myKey, fetchData())}}/>단, 반환된 데이터와 상태를 관리하는 방법은 다음과 같습니다.

API Reference에 따르면, 이 API Reference를 변경할 필요가 있습니다.enabled옵션을 false로 설정하면 쿼리가 자동으로 실행되지 않습니다.그런 다음 수동으로 다시 설정합니다.

// emulates a fetch (useQuery expects a Promise)
const emulateFetch = _ => {
  return new Promise(resolve => {
    resolve([{ data: "ok" }]);
  });
};

const handleClick = () => {
  // manually refetch
  refetch();
};

const { data, refetch } = useQuery("my_key", emulateFetch, {
  refetchOnWindowFocus: false,
  enabled: false // disable this query from automatically running
});

return (
  <div>
    <button onClick={handleClick}>Click me</button>
    {JSON.stringify(data)}
  </div>
);

여기서 작업 샌드박스

보너스: 부울을 반환하는 모든 항목을 다음에 전달할 수 있습니다.enabled이렇게 하면 Dependant/Serial 쿼리를 만들 수 있습니다.

// Get the user
const { data: user } = useQuery(['user', email], getUserByEmail)
 
// Then get the user's projects
const { isIdle, data: projects } = useQuery(
  ['projects', user.id],
  getProjectsByUser,
  {
    // `user` would be `null` at first (falsy),
    // so the query will not execute until the user exists
    enabled: user,
  }
)

통과해야 합니다.manual: true마운트 시 쿼리를 가져오지 않도록 매개 변수 옵션을 지정합니다.그리고 너는 합격해야 한다.fetchData괄호 없이 함수 참조를 전달하고 값을 전달하지 않습니다.쿼리를 호출하려면 refetch()를 사용합니다.

const {status, data, error, refetch} = useQuery(myKey, fetchData, {
      manual: true,
    });

const onClick = () => { refetch() }

자세한 내용은 https://github.com/tannerlinsley/react-query#manual-querying에서 react-parames documents 매뉴얼 쿼리 섹션을 참조하십시오.

문서가 변경되어 수동 쿼리 섹션이 없는 것 같습니다.그러나 useQuery API를 보면 아마도 이 API를enabled틀리다, 그리고 나서 사용하다refetch버튼을 누를 때 수동으로 쿼리합니다.또, 다음과 같이 하는 것도 사용할 수 있습니다.force: true데이터 신선도에 관계없이 쿼리할 수 있습니다.

여러 개의 재페치를 트리거하는 경우에도 사용할 수 있는 다른 방법이 있습니다.

const [fetch, setFetch] = useState(null);
const query = useQuery(["endpoint", fetch], fetchData);

const refetch = () => setFetch(Date.now());

// call the refetch when handling click.

여러 엔티티를 재페치하는 경우 instance fetchAll을 호출하는 최상위 useState를 사용할 수 있습니다.

...
const query = useQuery(["endpoint", fetch, fetchAll], fetchData);
...

버튼을 눌러 모두 가져오면 이 코드도 트리거됩니다.

다음 버전을 사용해 보십시오.

const fetchData = async()=>{...}

// it starts fetching data from backend with this line of code
const {status, data, error, refetch } = useQuery(
myKey, 
fetchData(),
{
  enabled: false,
}
);
const onClick = () => { refetch() }
// then use onClick where you need it

매뉴얼 문서:

enabled: boolean

• 이 쿼리를 자동으로 실행할 수 없도록 설정하려면 이 옵션을 false로 설정합니다.
• 종속 쿼리에 사용할 수 있습니다.

refetch: (options: { throwOnError: boolean, cancelRefetch: boolean }) => Promise<UseQueryResult>

• 쿼리를 수동으로 재페치하는 함수입니다.
• 쿼리 오류가 발생할 경우 오류만 기록됩니다.에러를 발생시키고 싶은 경우는,throwOnError: true option
• 한다면cancelRefetch이true새로운 요청이 이루어지기 전에 현재 요청이 취소됩니다.

첫 번째 반응 쿼리는 활성화 옵션을 제공하며 기본적으로는 True입니다.

const fetchData = async()=>{...}

const {status, data, error , refetch} = useQuery(myKey, fetchData() , {
enabled : false
}
);

<button onClick={() => refetch()}>Refetch</button>

키가 같으면 refetch()를 사용하고 키가 다르면 useState를 사용하여 쿼리를 트리거합니다.

예를 들어 다음과 같습니다.

const [productId, setProductId] = useState<string>('')
const {status, data, error, refetch} = useQuery(productId, fetchData, {
      enable: !!productId,
    });

const onClick = (id) => { 
if(productId === id) {
  refetch() 
}
else {
 setProductId(id)
}


}

Lazy를 사용할 수 있습니다.쿼리()

import React from 'react';
import { useLazyQuery } from '@apollo/client';

function DelayedQuery() {
   const [getDog, { loading, error, data }] = useLazyQuery(GET_DOG_PHOTO);

   if (loading) return <p>Loading ...</p>;
   if (error) return `Error! ${error}`;

   return (
      <div>
         {data?.dog && <img src={data.dog.displayImage} />}
         <button onClick={() => getDog({ variables: { breed: 'bulldog' } })}>Click me!</button>
      </div>
   );
}

레퍼런스: https://www.apollographql.com/docs/react/data/queries/ #manual-display-with-use-lazyquery

언급URL : https://stackoverflow.com/questions/62340697/react-query-how-to-usequery-when-button-is-clicked