CODEWITHSUNDEEP
reactjsreduxnext.jsrtk-query
Ali Bidjandy
Ali Bidjandy

Reputation: 411

how to use RTK query fetched data in the getStaticProps() of Next.js (I've got an error)

just try to use RTK query with my Next.js project but got this error when tried to use fetched data in getStaticProps() :

React Hook "useGetEventsQuery" is called in function "getStaticProps: GetStaticProps<Props, Params>" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter.

I know it says you have you use your useGetEventsQuery() under a React function which started with a capitalize letter but the question is how can I use my fetched data in a pre-rendering functions like that because I can't changed the name of a default pre-rendering function in next.js

// =====
import { DataFetcher } from "../../components/Api/dataFetcher";

type Props = {
  events: EventType[];
  isSuccess: boolean;
  isLoading: boolean;
};

interface Params extends ParsedUrlQuery {
  id: string;
}

const Pages = function (props: Props) {
  console.log(props);

  return (
    <Fragment>
      <Header />
      <EventSearch />
      <EventList />
    </Fragment>
  );
};
export const getStaticProps: GetStaticProps<Props, Params> = async (
  context
) => {
  const { isLoading, isSuccess, data: events } = useGetEventsQuery("");
  const params = context.params!; // ! is a non-null assertion
  const Events = DataFetcher();
  return {
    props: Events,
  };
};
export default Pages;

Upvotes: 1

Views: 3423

Answers (1)

A.B.D
A.B.D

Reputation: 91

I think you cannot use any kind of hook inside getStaticProps. because getStaticProps meant to be run on the server side and react hooks are meant to be run on client side. that's why you cannot use useGetEventsQuery.

in this case you can just use useGetEventsQuery directly inside your component no need getStaticPros, because rtk by default can run server side query.

Upvotes: 1

Related Questions