React Query 데이터베이스 플러그인: 전체 텍스트 검색 엔진과의 통합 실습-JS 튜토리얼-php.cn

React Query 데이터베이스 플러그인: 전체 텍스트 검색 엔진과의 통합 실습

王林

풀어 주다： 2023-09-26 15:41:15

원래의

1517명이 탐색했습니다.

React Query 数据库插件：与全文检索引擎的集成实践

React 쿼리 데이터베이스 플러그인: 전체 텍스트 검색 엔진과의 통합 실습

소개
React 쿼리는 React 애플리케이션에서 비동기 데이터를 처리하기 위한 강력한 상태 관리 라이브러리입니다. 이는 데이터를 쿼리하고, 캐시하고, 업데이트할 수 있는 간단하고 직관적인 API를 제공합니다. 그러나 데이터베이스 작업에 React Query를 사용할 때, 특히 전체 텍스트 검색이 필요한 경우 몇 가지 문제에 직면할 수 있습니다. 이 문제를 해결하기 위해 React Query를 전체 텍스트 검색 엔진과 통합하여 보다 강력하고 효율적인 데이터 쿼리 기능을 얻는 것을 고려할 수 있습니다. 이 글에서는 React Query에 전체 텍스트 검색 엔진을 통합하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다.

Background
기존 데이터베이스에서는 일반적으로 SQL 쿼리 언어를 사용하여 기본 데이터 쿼리 작업을 구현합니다. 그러나 전체 텍스트 검색을 수행해야 하는 경우 SQL 쿼리는 비효율적이며 요구 사항을 충족하지 못하는 경우가 많습니다. 전문 검색 엔진은 전문 검색을 위해 특별히 사용되는 기술로, 텍스트 데이터를 효율적으로 처리할 수 있으며 퍼지 검색, 관련성 정렬 등의 기능을 지원합니다.

React Query의 데이터베이스 플러그인을 사용하면 데이터베이스를 쉽게 운영하고 쿼리 결과를 캐시하여 애플리케이션 성능을 향상시킬 수 있습니다. 그러나 대량의 데이터에 대해 전체 텍스트 검색을 수행해야 하는 경우에는 여전히 전체 텍스트 검색 엔진을 사용해야 합니다. 다행스럽게도 React Query의 유연성 덕분에 전체 텍스트 검색 엔진과 쉽게 통합할 수 있습니다.

통합 연습
블로그 애플리케이션을 개발 중이고 React Query에서 기사에 대한 전체 텍스트 검색을 구현해야 한다고 가정해 보겠습니다. 이 경우 Elasticsearch를 전체 텍스트 검색 엔진으로 사용하는 것을 고려할 수 있습니다. 다음은 전체 텍스트 검색 기능을 구현하기 위한 몇 가지 주요 단계입니다.

Elasticsearch 인덱스 설정
먼저 블로그 게시물의 전체 텍스트 인덱스 데이터를 저장하기 위해 Elasticsearch에서 인덱스를 생성해야 합니다. Elasticsearch의 REST API 또는 공식 JavaScript 클라이언트를 사용하여 이 단계를 구현할 수 있습니다.
Elasticsearch를 React Query에 통합
React Query는 사용자 정의 쿼리 기능과 통합하는 기능을 제공합니다. 이 기능을 사용하여 Elasticsearch의 검색 API를 호출하는 사용자 지정 쿼리 함수를 작성할 수 있습니다.

// 导入 Elasticsearch 客户端
import { Client } from '@elastic/elasticsearch';

// 创建 Elasticsearch 客户端实例
const client = new Client({ node: 'http://localhost:9200' });

// 自定义查询函数
const searchPosts = async (query) => {
  const { body } = await client.search({
    index: 'articles',
    body: {
      query: {
        match: {
          title: query,
        },
      },
    },
  });
  
  return body.hits.hits.map(hit => hit._source);
};

// 在 React Query 中注册自定义查询函数
const queryClient = new QueryClient();
queryClient.setQueryDefaults({ queries: { enabled: false } });
queryClient.setDefaultOptions({ queries: { enabled: true } });
queryClient.setQueryFn('searchPosts', searchPosts);

// 在组件中使用自定义查询函数
const SearchForm = () => {
  const queryClient = useQueryClient();
  
  const onSubmit = (e) => {
    e.preventDefault();
    const query = e.target.elements.query.value;
    queryClient.invalidateQueries('searchPosts', { query });
  };
  
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="query" />
      <button type="submit">搜索</button>
    </form>
  );
};

로그인 후 복사

위의 코드 예시에서는 Elasticsearch 클라이언트 인스턴스를 생성하고 사용자 정의 쿼리 함수 searchPosts를 정의했습니다. 이 기능은 Elasticsearch의 검색 API를 사용하여 제목과 일치하는 기사 데이터를 쿼리합니다. 다음으로 React Query의 setQueryDefaults 메서드와 setQueryFn 메서드를 사용하여 사용자 정의 쿼리 함수를 등록하고 이 쿼리 함수를 컴포넌트에서 사용합니다. searchPosts。该函数使用 Elasticsearch 的搜索 API 查询匹配标题的文章数据。接下来，我们使用 React Query 的 setQueryDefaults 方法和 setQueryFn 方法注册了自定义查询函数，并在组件中使用了这个查询函数。

在组件中使用查询结果
一旦我们在 React Query 中进行了全文搜索，我们就可以在组件中使用查询结果了。React Query 会自动对查询结果进行缓存和更新，以保持数据的一致性。以下是一个展示搜索结果的组件示例：

const SearchResults = () => {
  const queryClient = useQueryClient();
  const query = 'React Query';

  const { data, isFetching } = useQuery('searchPosts', () => queryClient.fetchQueryData('searchPosts', query));
  
  if (isFetching) {
    return <div>Loading...</div>;
  }
  
  if (data && data.length === 0) {
    return <div>No results found</div>;
  }
  
  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

로그인 후 복사

在上面的代码示例中，我们使用了 useQuery

React Query에서 전체 텍스트 검색을 수행한 후에는 쿼리 결과를 컴포넌트에서 사용할 수 있습니다. React Query는 쿼리 결과를 자동으로 캐시하고 업데이트하여 데이터 일관성을 유지합니다. 다음은 검색 결과를 표시하는 구성 요소의 예입니다.

useQuery

위 내용은 React Query 데이터베이스 플러그인: 전체 텍스트 검색 엔진과의 통합 실습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!