- 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;
- 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;
- 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エンドポイントやクエリの構造を適切に調整してください。