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!
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
deep-jadeβ’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.
national-goldβ’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!
like-goldβ’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;
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 π¦national-goldβ’2y ago
Wow! You are amazing! "List: () => null" does all the trick. Thank you so much for the help! ππ»