Pemalam pangkalan data React Query: amalan penyepaduan dengan enjin carian teks penuh-tutorial js-php.cn

Pemalam pangkalan data React Query: amalan penyepaduan dengan enjin carian teks penuh

王林

Lepaskan： 2023-09-26 15:41:15

asal

1452 orang telah melayarinya

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

Pemalam Pangkalan Data Pertanyaan React: Amalan Integrasi dengan Enjin Carian Teks Penuh

Pengenalan
React Query ialah perpustakaan pengurusan negeri yang berkuasa untuk memproses data tak segerak dalam aplikasi React. Ia menyediakan API mudah dan intuitif yang membolehkan kami membuat pertanyaan, cache dan mengemas kini data. Walau bagaimanapun, kami mungkin menghadapi beberapa cabaran apabila menggunakan React Query untuk operasi pangkalan data, terutamanya jika pengambilan teks penuh diperlukan. Untuk menyelesaikan masalah ini, kami boleh mempertimbangkan untuk menyepadukan React Query dengan enjin carian teks penuh untuk mendapatkan keupayaan pertanyaan data yang lebih berkuasa dan cekap. Artikel ini akan memperkenalkan cara mengintegrasikan enjin carian teks penuh dalam React Query dan menyediakan beberapa contoh kod khusus.

Latar Belakang
Dalam pangkalan data tradisional, kami biasanya menggunakan bahasa pertanyaan SQL untuk melaksanakan operasi pertanyaan data asas. Walau bagaimanapun, apabila kita perlu melakukan carian teks penuh, pertanyaan SQL selalunya tidak cekap dan tidak dapat memenuhi keperluan. Enjin carian teks penuh ialah teknologi yang digunakan khusus untuk carian teks penuh Ia boleh memproses data teks dan fungsi sokongan dengan cekap seperti carian kabur dan pengisihan perkaitan.

Pemalam pangkalan data React Query membolehkan kami mengendalikan pangkalan data dan keputusan pertanyaan cache dengan mudah untuk meningkatkan prestasi aplikasi. Walau bagaimanapun, apabila kami perlu melakukan carian teks penuh pada sejumlah besar data, kami masih perlu menggunakan enjin carian teks penuh. Nasib baik, fleksibiliti React Query memudahkan untuk disepadukan dengan enjin carian teks penuh.

Amalan Integrasi
Andaikan kami sedang membangunkan aplikasi blog dan perlu melaksanakan carian teks penuh untuk artikel dalam React Query. Dalam kes ini, kita boleh mempertimbangkan untuk menggunakan Elasticsearch sebagai enjin carian teks penuh. Berikut ialah beberapa langkah utama untuk melaksanakan fungsi carian teks penuh:

Sediakan indeks Elasticsearch
Mula-mula, kita perlu mencipta indeks dalam Elasticsearch untuk menyimpan data indeks teks penuh catatan blog. Kami boleh melaksanakan langkah ini menggunakan API REST Elasticsearch atau pelanggan JavaScript rasmi.
Sepadukan Elasticsearch ke dalam React Query
React Query menyediakan keupayaan untuk menyepadukan dengan fungsi pertanyaan tersuai. Kita boleh menggunakan ciri ini untuk menulis fungsi pertanyaan tersuai yang memanggil API carian Elasticsearch.

// 导入 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>
  );
};

Salin selepas log masuk

Dalam contoh kod di atas, kami mencipta tika klien Elasticsearch dan menentukan fungsi pertanyaan tersuai searchPosts. Fungsi ini menggunakan API carian Elasticsearch untuk menanyakan data artikel yang sepadan dengan tajuk. Seterusnya, kami menggunakan kaedah setQueryDefaults React Query dan kaedah setQueryFn untuk mendaftarkan fungsi pertanyaan tersuai dan menggunakan fungsi pertanyaan ini dalam komponen. 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>
  );
};

Salin selepas log masuk

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

Setelah kami melakukan carian teks penuh dalam React Query, kami boleh menggunakan hasil pertanyaan dalam komponen. React Query secara automatik cache dan kemas kini hasil pertanyaan untuk mengekalkan konsistensi data. Berikut ialah contoh komponen yang memaparkan hasil carian:

useQuery

Atas ialah kandungan terperinci Pemalam pangkalan data React Query: amalan penyepaduan dengan enjin carian teks penuh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!