Reactを使用した検索クエリAPIの例


  1. axiosを使用したGETリクエスト: axiosは、Reactでよく使用されるHTTPクライアントライブラリです。以下は、GETリクエストを使用して検索クエリを実行する例です。
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const SearchComponent = () => {
  const [searchResults, setSearchResults] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/search?q=query');
        setSearchResults(response.data.results);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
  return (
    <div>
      {searchResults.map((result) => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
};
export default SearchComponent;
  1. Fetch APIを使用したGETリクエスト: Fetch APIは、ネイティブのブラウザAPIであり、axiosを使用する代わりに組み込みのfetch関数を使用します。
import React, { useState, useEffect } from 'react';
const SearchComponent = () => {
  const [searchResults, setSearchResults] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/search?q=query');
        const data = await response.json();
        setSearchResults(data.results);
      } catch (error) {
        console.error(error);
      }
    };
    fetchData();
  }, []);
  return (
    <div>
      {searchResults.map((result) => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
};
export default SearchComponent;
  1. GraphQLを使用したクエリ実行: GraphQLは、データクエリとマニピュレーションのためのクエリ言語です。以下は、ReactアプリケーションでGraphQLクエリを使用して検索結果を取得する例です。
import React, { useState, useEffect } from 'react';
import { useQuery } from '@apollo/client';
import { SEARCH_QUERY } from './graphql/queries';
const SearchComponent = () => {
  const [searchResults, setSearchResults] = useState([]);
  const { loading, error, data } = useQuery(SEARCH_QUERY, {
    variables: { query: 'search query' },
  });
  useEffect(() => {
    if (data) {
      setSearchResults(data.searchResults);
    }
  }, [data]);
  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    console.error(error);
    return <div>Error occurred</div>;
  }
  return (
    <div>
      {searchResults.map((result) => (
        <div key={result.id}>{result.title}</div>
      ))}
    </div>
  );
};
export default SearchComponent;

これらはReactで検索クエリAPIを実装するためのいくつかの一般的な方法です。必要に応じて、APIエンドポイントやクエリの構造を適切に調整してください。