correct-apricot•2y ago

Error to include SSR page in resources list on _app.tsx

There is a warning if we use SSR page in resources on _app.tsx For example to use list UserList to get users in sidebar menu: resources={[ { name: "users", list: UserList}, ]}
Here the UserList is SSR page export const UserList: React.FC<{ users: GetListResponse<IPost> }> = ({
users, }) => { We got the warning: [{"message": "Type 'FC<{ users: GetListResponse<IPost>; }>' is not assignable to type 'FunctionComponent<IResourceComponentsProps<any, any, ILogData>>'.\n Types of property 'propTypes' are incompatible.\n Type 'WeakValidationMap<{ users: GetListResponse<IPost>; }> | undefined' is not assignable to type 'WeakValidationMap<IResourceComponentsProps<any, any, ILogData>> | undefined'.\n Type 'WeakValidationMap<{ users: GetListResponse<IPost>; }>' has no properties in common with type 'WeakValidationMap<IResourceComponentsProps<any, any, ILogData>>'.", "message": "The expected type comes from property 'list' which is declared here on type 'ResourceProps'", "resource": "/node_modules/@pankod/refine-core/dist/contexts/resource/IResourceContext.d.t.s" } ] }] Thank you for the help!

4 Replies

dependent-tan•2y ago

Hey @maxdata, Thank you for your reporting 🙏🏻 We will discuss it with team on first workday. when we have any update, we'll touch in you as soon as possible. Sorry, I can’t help you right now.

correct-apricot•2y ago

@salihozdemir happy holiday. Any chance to have a look at this issue? SSR page can not be used in sidebar or resource. 😭 Thank you!

genetic-orange•2y ago

Hey @maxdata, sorry for the issue 🙏 By "SSR Page" do you mean a page created under /pages and imported at _app to be used as list component for the resource? components of resource is typed with IResourceComponentsProps like below;

import { IResourceComponentsProps } from "@pankod/refine-core";

export const UserList: React.FC<IResourceComponentsProps> = () => {
...
}

import { IResourceComponentsProps } from "@pankod/refine-core";

export const UserList: React.FC<IResourceComponentsProps> = () => {
...
}

But I think I understood what you're trying to achieve 🤔 Let me write a quick guide on what I understood about your issues 😅 SSR Page Not visible in <Sider/> When you define a page in pages/ directory. Next.js will prioritize this route over [[...refine]] routes (because its more defined than a catch-all route) But since you don't add this route to the resources array of <Refine/> it will not be visible in <Sider/>. To achieve this, you can add like { name: "users", list: () => null } and it will be visible in <Sider/> without rendering list because pages/users/index is prioritized. SSR and getServerSideProps for a resource If you want to do custom handling in getServerSideProps for a single resource. It's possible with using our [[...refine]] route. We have an example with-nextjs which does SSR for authentication and prefetching the data. It's done for each resources but its easy to make cases for a single resource. Here's the source code you might want to check out: https://github.com/refinedev/refine/blob/next/examples/with-nextjs/pages/%5B%5B...refine%5D%5D.tsx So, you can keep defining routes and resources within <Refine/> component's resources prop and pass custom data from getServerSideProps to the resource pages without defining a custom route in pages/ Note: Ant Design v5 is not compatible with Next.js yet, therefore our with-nextjs example is not working properly right now 😦

correct-apricot•2y ago

Wow! You are amazing! "List: () => null" does all the trick. Thank you so much for the help! 👍🏻