フロントのクエリパラメータを検知し、APIのクエリパラメータに設定する

はじめに

普段はReactで実装しています。ReactとAPIのget通信時、クエリパラメータを設定するのですが、量が増えてくると何かと大変です。特にAPIのクエリパラメータの設定箇所が大変でした。

表題通り、フロントのクエリパラメータを検知してAPIのクエリパラメータに設定する方法を記載します。

成果物

検索バーを変更する事でフロントのクエリパラメータを変更。
その後、APIのクエリパラーメターを変更し接続しています。

ソースコード

ディレクトリ構成

├── src
│   ├── App.tsx
│   ├── components
│   │   ├── Content.tsx
│   │   ├── Header.tsx
│   │   ├── api.ts
│   │   ├── hooks.tsx
│   │   └── index.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   └── setupTests.ts

App.tsx

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { Sample } from './components';

function App() {
  return (
    <Router>
      <Sample />
    </Router>
  );
}

export default App;

src/components/index.tsx

import { Content } from './Content';
import { SearchBar } from './Header';
import { useSearchQuery } from './hooks';

export const Sample = () => {
  const { data, error } = useSearchQuery();
  if (!data) return <div>loading...</div>;
  if (error) return <div>{error}</div>;

  return (
    <div style={{ margin: '16px' }}>
      <SearchBar />
      <Content data={data} />
    </div>
  );
};

src/components/Header.tsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import TextField from '@mui/material/TextField';

export const SearchBar = () => {
  const [query, setQuery] = useState('');
  const navigate = useNavigate();

  useEffect(() => {
    // ユーザーの入力があるたびにURLのクエリパラメータを更新
    const params = new URLSearchParams();
    if (query) {
      params.append('id', query);
    } else {
      params.delete('id');
    }
    navigate(`?${params.toString()}`, { replace: true });
  }, [query, navigate]);

  return (
    <TextField
      label="検索"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
};

src/components/Content.tsx

import React from 'react';
import { Result } from './hooks';
type Props = {
  data: Result[];
};

export const Content = (data: Props) => {
  return (
    <div>
      {data.data?.map((item) => (
        <div key={item.id}>
          <p>{item.name}</p>
          <p>{item.email}</p>
          <p>{item.body}</p>
        </div>
      ))}
    </div>
  );
};