useQueryのrefetchの挙動
Q&A
Closed
解決したいこと
ページングのための、「次へ」ボタンをクリックしたら、
現在のページに1を足した値をクエリパラメータpageにセットして、
useQueryのrefetch()を実行することで、外部JSONデータを取得したいです。
発生している問題
クライアントで設定したエンドポイントのクエリパラメーターが、
サーバー側で取得できず、前回のクエリーパラメーターが設定されてしまいます。
コード
クライアント側
pages/index.js
import { useQuery} from "react-query";
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
refetchOnWindowFocus: false,
},
},
});
export default function Home() {
return (
<QueryClientProvider client={queryClient}>
<Main />
</QueryClientProvider>
);
}
function Main() {
const [page, setPage] = useState(1); //現在のページ
const params = {
page: page,
};
const urlSearchParam = new URLSearchParams(params).toString();
const defaultEndpoint = "/api/items?" + urlSearchParam;
console.log("クライアント エンドポイント", defaultEndpoint);
const { data, refetch } = useQuery(
["items"],
async () => await fetch(defaultEndpoint).then((res) => res.json()),{
enabled: true,
}
);
const getItems = async () => {
refetch();
};
// Pagination +
const pageIncrement = () => {
const newPage = page + 1;
setPage(newPage);
params.page = newPage;
getItems();
};
return (
<>
<button onClick={() => pageIncrement()}>
次へ
</button>
</>
);
}
サーバー側
api/items/index.js
export const getSearchItems = async (req, res) => {
const page = req.query.page;
const params = {
page: page,
};
const urlSearchParam = new URLSearchParams(params).toString();
const defaultEndpoint =
"http://xxxxx.ne.jp/search?" + urlSearchParam;
console.log("サーバー エンドポイント",defaultEndpoint);
try {
const response = await fetch(defaultEndpoint);
if (!response.ok) {
throw new Error(`Error! status: ${response.status}`);
}
const users = await response.json();
res.status(200).json({ users });
} catch (err) {
console.log(err);
}
};
export default getSearchItems;
初回ロードで
クライアント側で
page に1がセットされる
「次へ」ボタンをクリックすると、
クライアント側で
pageに2がセットされる
が、
サーバー側では、
pageが前回の1のまま
console.log("クライアント エンドポイント", defaultEndpoint);
出力 /api/items?page=2
console.log("サーバー エンドポイント",defaultEndpoint);
出力 http://xxxxx.ne.jp/search?page=1
0
