Redux Toolkit RTK Query を使用してクエリ パラメータを API に渡すにはどうすればよいですか?
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
const baseUrl = 'xxxxxxx';
export const postsApi = createApi({
reducerPath: 'posts',
baseQuery: fetchBaseQuery({ baseUrl }),
endpoints: (builder) => ({
getPostsByYear: builder.query({
query: (start, end) => { // Why is 'end' always undefined???
return {
url: 'posts/',
params: { start, end },
};
},
}),
getPosts: builder.query({
query: () => 'posts/',
}),
getPostByID: builder.query({
query: (name) => `posts/${name}`,
}),
}),
});
export const { useGetPostsQuery, useGetPostsByYearQuery, useGetPostByIDQuery } = postsApi;
コンポーネントからパラメーターを渡そうとすると、start
値のみが認識されるようです。year
コンポーネント内の select 要素によって更新され<PostOptions/>
ます。useState
フックを使用しています。値は正しく更新useGetPostsByYearQuery
され、呼び出されますが、end
パラメーターは常に未定義です。そのため、API エンドポイントを正しく定義していないようです。何かアドバイスはありますか?私がやりたいのは、フォームでリクエストを送信することだけですhttp://xxx/posts?start=start&end=end
。
たとえば、end
パラメーターの文字列値をハードコーディングしようとしましたが、APIコールバック内にあるように見えるため、より基本的なものが欠けています。useGetPostsByYearQuery(year, '2019')
undefined
const Post = () => {
const year = useSelector((state) => state.postOptions.year);
const yearPlusOne = parseInt(year, 10) + 1;
const { data, error, isLoading } = useGetPostsByYearQuery(year, yearPlusOne);
return (
<SafeAreaView style={styles.container}>
<View style={styles.content}>
<PostHeading />
<PostOptions></PostOptions>
</View>
</SafeAreaView>
);
};
export default Post;