7

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;
4

1 に答える 1