How can I "extract" and return my user array in getUsers?
Hi,
In the Metronic 8.1.0 version of React there is a User Management component.
In src/app/modules/apps/user-management/users-list/core/_requests.ts there's the getUsers method that fetches the users array:
const getUsers = (query: string): Promise=> { return axios .get(`${GET_USERS_URL}?${query}`) .then((d: AxiosResponse ) => d.data) }
UsersQueryResponse is declared in src/app/modules/apps/user-management/users-list/core/_models.ts:
export type UsersQueryResponse = Response<Array<User>>
The actual data that gets returned looks like this:
[
{ id: 1, name: Peter }
{ id: 2, name: Maria }
{ id: 3, name: John }
]
Now, in my case, I get back a slightly different object from the server. The data object looks like this:
{
list: [
{ id: 1, name: Peter }
{ id: 2, name: Maria }
{ id: 3, name: John }
]
}
So as you can see the user array is one level further down in the hierarchy.
So my question is; how can I "extract" and return my user array in getUsers?
Replies (6)
Hi, I've finally had some time to test the code snippet you gave me.
This is what I did:
- Configured the types so that they now look like this:
src/app/modules/apps/user-management/users-list/core/_models.ts
import {ID, Response} from '../../../../../../_metronic/helpers'
export type User = {
id?: ID
name?: string
avatar?: string
email?: string
position?: string
role?: string
last_login?: string
two_steps?: boolean
joined_day?: string
online?: boolean
initials?: {
label: string
state: string
}
}
export type CustomType = {
list: Array
}
// export type UsersQueryResponse = Response < Array < User > >
export type UsersQueryResponse = Response < CustomType >
export const initialUser: User = {
avatar: 'avatars/300-6.jpg',
position: 'Art Director',
role: 'Administrator',
name: '',
email: '',
}
- Now VSCode is complaining about the following line in
src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsx
and in particular theresponse
parameter:
The error message that I'm getting in VSCode is the following:
[{
"resource": "REDACTED/src/app/modules/apps/user-management/users-list/core/QueryResponseProvider.tsx",
"owner": "typescript",
"code": "2322",
"severity": 8,
"message": "Type 'UsersQueryResponse | undefined' is not assignable to type 'Response | undefined'.\n Type 'UsersQueryResponse' is not assignable to type 'Response'.\n Types of property 'data' are incompatible.\n Type 'CustomType | undefined' is not assignable to type 'User[] | undefined'.\n Type 'CustomType' is missing the following properties from type 'User[]': length, pop, push, concat, and 35 more.",
"source": "ts",
"startLineNumber": 52,
"startColumn": 76,
"endLineNumber": 52,
"endColumn": 84,
"relatedInformation": [
{
"startLineNumber": 53,
"startColumn": 3,
"endLineNumber": 53,
"endColumn": 11,
"message": "The expected type comes from property 'response' which is declared here on type 'QueryResponseContextProps'",
"resource": "REDACTED/src/_metronic/helpers/crud-helper/models.ts"
}
]
}]
Any ideas why it is giving me this error and how to correct it?
Thanks.
Hi,
Did you update types in src/app/modules/apps/user-management/users-list/core/_requests.ts?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi,
Please don't hesitate to reach out if you need anything more from us.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Your Support Matters!
Hi,
Thank you for reaching out to us.
The response is a generic type where you can specify your data response, if you have a different data structure instead of passing a user array type you can pass a custom type.
Check out the example in this gist file.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
