Plug-in de base de données React Query : pratique d'intégration avec le moteur de recherche en texte intégral

Plugin de base de données React Query : pratique d'intégration avec un moteur de recherche en texte intégral

Introduction
React Query est une puissante bibliothèque de gestion d'état pour le traitement des données asynchrones dans les applications React. Il fournit une API simple et intuitive qui nous permet d'interroger, de mettre en cache et de mettre à jour les données. Cependant, nous pouvons être confrontés à certains défis lors de l'utilisation de React Query pour les opérations de base de données, en particulier si la récupération du texte intégral est requise. Afin de résoudre ce problème, nous pouvons envisager d'intégrer React Query au moteur de recherche en texte intégral pour obtenir des capacités de requête de données plus puissantes et efficaces. Cet article expliquera comment intégrer un moteur de recherche en texte intégral dans React Query et fournira quelques exemples de code spécifiques.

Contexte
Dans les bases de données traditionnelles, nous utilisons généralement le langage de requête SQL pour implémenter les opérations de requête de données de base. Cependant, lorsque nous devons effectuer une recherche en texte intégral, les requêtes SQL sont souvent inefficaces et ne peuvent pas répondre aux besoins. Le moteur de recherche en texte intégral est une technologie spécifiquement utilisée pour la recherche en texte intégral. Il peut traiter efficacement les données textuelles et prendre en charge des fonctions telles que la recherche floue et le tri par pertinence.

Le plug-in de base de données de React Query nous permet d'exploiter facilement la base de données et de mettre en cache les résultats des requêtes pour améliorer les performances des applications. Cependant, lorsque nous devons effectuer une recherche en texte intégral sur une grande quantité de données, nous devons toujours utiliser un moteur de recherche en texte intégral. Heureusement, la flexibilité de React Query facilite son intégration aux moteurs de recherche en texte intégral.

Pratique d'intégration
Supposons que nous développions une application de blog et que nous devions implémenter la recherche en texte intégral d'articles dans React Query. Dans ce cas, nous pouvons envisager d’utiliser Elasticsearch comme moteur de recherche en texte intégral. Voici quelques étapes clés pour implémenter la fonctionnalité de recherche en texte intégral :

1. Configurer l'index Elasticsearch
   Tout d'abord, nous devons créer un index dans Elasticsearch pour stocker les données d'index en texte intégral des articles de blog. Nous pouvons implémenter cette étape à l'aide de l'API REST d'Elasticsearch ou du client JavaScript officiel.
2. Intégrer Elasticsearch dans React Query
   React Query offre la possibilité de s'intégrer à des fonctions de requête personnalisées. Nous pouvons utiliser cette fonctionnalité pour écrire une fonction de requête personnalisée qui appelle l'API de recherche d'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>
  );
};

Dans l'exemple de code ci-dessus, nous avons créé une instance client Elasticsearch et défini une fonction de requête personnalisée searchPosts. Cette fonction utilise l'API de recherche d'Elasticsearch pour interroger les données d'article correspondant au titre. Ensuite, nous utilisons la méthode setQueryDefaults et la méthode setQueryFn de React Query pour enregistrer une fonction de requête personnalisée et utiliser cette fonction de requête dans le composant. searchPosts。该函数使用 Elasticsearch 的搜索 API 查询匹配标题的文章数据。接下来，我们使用 React Query 的 setQueryDefaults 方法和 setQueryFn 方法注册了自定义查询函数，并在组件中使用了这个查询函数。

3. 在组件中使用查询结果
   一旦我们在 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

Utilisation des résultats de la requête dans le composant

Une fois que nous avons effectué une recherche en texte intégral dans React Query, nous pouvons utiliser les résultats de la requête dans le composant. React Query met automatiquement en cache et met à jour les résultats de la requête pour maintenir la cohérence des données. Voici un exemple de composant qui affiche les résultats de recherche :


rrreee🎜Dans l'exemple de code ci-dessus, nous avons utilisé le hook useQuery pour obtenir les résultats de la requête de React Query. Si la requête est en cours, nous affichons « Chargement... » ; si aucun résultat n'est trouvé, nous affichons « Aucun résultat trouvé » sinon, nous restituons les résultats sous forme de liste ; 🎜🎜Conclusion🎜En intégrant React Query à un moteur de recherche en texte intégral, nous pouvons implémenter une fonctionnalité de recherche en texte intégral efficace dans les applications React. Cet article explique comment effectuer une recherche en texte intégral à l'aide d'Elasticsearch en écrivant une fonction de requête personnalisée dans React Query. Espérons que ces exemples de code vous aideront à intégrer les moteurs de recherche en texte intégral dans la pratique. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!