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:
// 导入 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> ); };
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
方法注册了自定义查询函数,并在组件中使用了这个查询函数。
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
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
untuk mendapatkan hasil pertanyaan daripada React Query. Jika pertanyaan sedang berjalan, kami memaparkan "Memuatkan..."; 🎜🎜Kesimpulan🎜Dengan menyepadukan React Query dengan enjin carian teks penuh, kami boleh melaksanakan fungsi carian teks penuh yang cekap dalam aplikasi React. Artikel ini menerangkan cara melakukan carian teks penuh menggunakan Elasticsearch dengan menulis fungsi pertanyaan tersuai dalam React Query. Semoga contoh kod ini akan membantu anda menyepadukan enjin carian teks penuh dalam amalan. 🎜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!