exotic-emerald
exotic-emeraldβ€’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
foreign-sapphire
foreign-sapphireβ€’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.
exotic-emerald
exotic-emeraldβ€’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!
fascinating-indigo
fascinating-indigoβ€’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 😦
exotic-emerald
exotic-emeraldβ€’2y ago
Wow! You are amazing! "List: () => null" does all the trick. Thank you so much for the help! πŸ‘πŸ»