RTK QUERY With React 如何根据查询参数重新获取查询？

Question

好的，我有电影数据。我想在 RTK 查询中根据 imdb 和流派制作过滤数据。此外，它还将具有无限卷轴。当我尝试遵循代码时，它不起作用。 数据不会根据新的 arg 参数而改变。不幸的是，旧数据再次获取。但我没有找到解决方案。有人可以帮我吗？

这是RTK查询服务

getMovieOrTvService: builder.query<
  IListMovieResponse,
  { category: string; page: number; id?: string; vote?: number | string }
>({
  query: (arg) =>

   //Watch This Space !!! 
// Well, i want to re-fetch data according to arg's parameters 
//and as you see query changes according to arg's parameters.  

    arg.vote
      ? `/discover/${arg.category}?api_key=${process.env.REACT_APP_API_KEY}&sort_by=popularity.desc&page=${arg.page}&with_genres=${arg.id}&vote_average.gte=${arg.vote}`
      : `/discover/${arg.category}?api_key=${process.env.REACT_APP_API_KEY}&sort_by=popularity.desc&page=${arg.page}`,
  providesTags: (result) =>
    result
      ? [
          ...result.results.map(({ id }) => ({
            type: "Post" as const,
            id,
          })),
          { type: "Post", id: "LIST" },
        ]
      : [{ type: "Post", id: "LIST" }],

  serializeQueryArgs: ({ endpointName }) => {
    return endpointName;
  },
  // Always merge incoming data to the cache entry
  merge: (currentCache, newItems) => {
    if (currentCache?.page !== newItems?.page) {
      currentCache.results.push(...newItems.results);
    }
  },
  // Refetch when the page arg changes
  forceRefetch({ currentArg, previousArg }) {        
    return currentArg !== previousArg;
  },
}),

这是 React 组件

const FilterMovieTv = () => {
      const { category } = useParams();
      const [filter, setFilter] = useState<IValues>();
      const [page, setPage] = useState<number>(1);
      const genres = useGetGenresServiceQuery();
 
      const allMovieTv = useGetMovieOrTvServiceQuery({
        category: category!,
        page: page,
        id: "35",
        vote: 7
      });

      useEffect(() => {
        const onScroll = () => {
          const scrolledToBottom =
            window.innerHeight + window.scrollY >= document.body.offsetHeight;
          if (scrolledToBottom && !allMovieTv.isFetching) {
            console.log("Fetching more data...");
            setPage((prev) => prev + 1);
          }
        };
        document.addEventListener("scroll", onScroll);
        return function () {
          document.removeEventListener("scroll", onScroll);
        };
      }, [allMovieTv.isFetching, page]);
      const initialValues: IValues = {
        genre: 0,
        imdb: 0,
      };
      return (
        <div className={styles.container}>
          <div className={styles.container_filter}>
            <Formik
              initialValues={initialValues}
              onSubmit={(values: IValues) => {
                console.log({ values });
                setFilter({
                  genre: values.genre,
                  imdb: values.imdb,
                });
              }}
            >
              <Form className={styles.container_filter_form}>
                <div className={styles.container_filter_form_genre}>
                  <Field as="select" name="genre">
                    <option selected>Genre</option>
                    {genres?.data?.genres.map((genre) => (
                      <option value={genre.id}>{genre.name}</option>
                    ))}
                  </Field>
                </div>
                <div className={styles.container_filter_form_imdb}>
                  <Field as="select" name="imdb">
                    <option selected>IMDB Rating</option>
                    {imdb.map((item) => (
                      <option value={item.value}>{item.name}</option>
                    ))}
                  </Field>
                </div>
                <div className={styles.container_filter_form_button}>
                  <button type="submit">Search</button>
                </div>
              </Form>
            </Formik>
          </div>
          <div></div>
        </div>
      );
    };