NestJS: Real Time Search - Filter By username and Paginate results | Bog Project V-10

[@mhasbullahabubakar]

Thomas, really appreciate your tutorial. Love the step by step flow because it help me learn nestjs and typescript at the same time.

[@TommiCodes]

Thanks! Great to hear

[@albertoarielarce2982]

Thanks Thomas, this course is very helpful to me. It's a really great job.

[@TommiCodes]

Thanks! Great to hear!

[@ФедорДвинятин-я5у]

Hi, Thomas - thank you very much for your incredible lessons!

[@TommiCodes]

Thanks!

[@Dheeraj-S-Bhojak]

appreciate....

[@Bathusaix]

in this part I have many errors in the pagination by filter ... it's frustrating I can't find it because ...

[@Bathusaix]

No overload matches this call.
Overload 1 of 2, '(options?: FindManyOptions): Promise', gave the following error.
Type 'string | number' is not assignable to type 'number'.
Type 'string' is not assignable to type 'number'.
Overload 2 of 2, '(conditions?: FindConditions): Promise', gave the following error.
Argument of type '{ skip: number; take: string | number; order: { id: string; }; select: string[]; where: { username: FindOperator; }[]; }' is not assignable to parameter of type 'FindConditions'.
Object literal may only specify known properties, and 'skip' does not exist in type 'FindConditions'.

[@hancockhan990]

I was getting the exact same errors.
However, I've managed to clear the "Type 'string | number' is not assignable to type 'number'" errors by converting the all the arguments to number type as follows: Number(options.limit) or Number(options.page). Then now everything works.
Hope this helps!

[@Bathusaix]

@@hancockhan990 thanks actually I had stuck here and waited for the answer from thomas .. I'll try

[@happyrealtor2024]

I had the same problem.
I solve the problem by
npm install nestjs-typeorm-paginate@2.0.3
same version as the tutorial.

[@albertoarielarce2982]

@@happyrealtor2024 you save me! thanks!

[@666zulett]

thanks a lot great video u save my life at my work XD

[@simon_smale]

I know I am very far behind but for the skip you could do (options.page -1 ) * options.limit rather than implementing 2 numbering systems.
how you have it currently with requiring page=0 all your links are broken. Also they should not be shown if there is no other pages to go to (like in the felix example around 25:40)
loving the series!

[@TommiCodes]

Thanks for the feedback.
Yeah, later on in the series I implemented the paginating better. You can always have a look in the repository - to see the current code.
--> But I will refactor the whole code in the next series, and add stuff like ngrx, and some backend stuff

[@simon_smale]

@@TommiCodes looking forward to the next instalment. The content, pacing and explanation are all fantastic. Would be great to see some true reactive programming (using the async pipe) and websockets!
Also might be worth looking into noise gates and compression settings in audio of OBS, will help get rid of the hiss

[@TommiCodes]

@@simon_smale Ah thanks for the hint - i will check OBS audio options tomorrow.
Async pipe is definetely on the list :)

[@TommiCodes]

I just wish i would have more time :D

[@simon_smale]

Same here. So much to learn and do and so little time.

[@pushkardureja6863]

What if we want to filter by various fields and it depends on the user, for example, filter by email or any other field. Can u suggest a general design which could work with any field

[@TommiCodes]

Yeah you can add this checks in the backend and if the query param is null, then don't apply the specific filter

[@pushkardureja6863]

@@TommiCodes cool thanks !!

[@asaelel]

I only have one doubt. Why do you have logic to generate urls at the same level where you make queries to the db?... they are two clearly different responsibilities

[@TommiCodes]

Yeah, could be divided.

[@achrefbannouri2995]

Hi Thomas, thanks for the amazing series ! in this part, im getting this error "invalid input syntax for type integer: "NaN" QueryFailedError: invalid input syntax for type integer: "NaN"" !
Any help please?

[@TommiCodes]

Maybe convert your input to a number.
To help you, pls provide the code, or share your github repo :)

[@achrefbannouri2995]

@@TommiCodes Thanks for the reply thomas, here is my code in companies.service.ts :
paginateFilterByUsername(options: IPaginationOptions, nameParameter: string): Observable{
return from(this.companiesRepository.findAndCount({
skip: options.page * options.limit || 0,
take: options.limit || 10,
order: {id: "ASC"},
select: ['id', 'name', 'jobs', 'address', 'field','offers','phone'],
where: [
{ name: ILike(`%${nameParameter}%`)}
]
})).pipe(
map(([users, totalUsers]) => {
const usersPageable: Pagination = {
items: users,
links: {
first: options.route + `?limit=${options.limit}`,
previous: options.route + ``,
next: options.route + `?limit=${options.limit}&page=${options.page +1}`,
last: options.route + `?limit=${options.limit}&page=${Math.ceil(totalUsers / options.limit)}`
},
meta: {
currentPage: options.page,
itemCount: users.length,
itemsPerPage: options.limit,
totalItems: totalUsers,
totalPages: Math.ceil(totalUsers / options.limit)
}
};
return usersPageable;
})
)
}
paginate(options: IPaginationOptions): Observable {
return from(paginate(this.companiesRepository, options)).pipe(
map((usersPageable: Pagination) => {
usersPageable.items.forEach(function (v) {delete v.password});
return usersPageable;
})
)
}

[@ngomafresnel4260]

@@achrefbannouri2995 Hi ! i'm getting the same error and i don't know how to solve it.
No overload matches this call.
Overload 1 of 2, '(options?: FindManyOptions): Promise', gave the following error.
Type 'string | number' is not assignable to type 'number'.
Type 'string' is not assignable to type 'number'.
Overload 2 of 2, '(conditions?: FindConditions): Promise', gave the following error.
Argument of type '{ skip: number; take: string | number; order: { id: string; }; select: string[]; where: { username: any; }[]; }' is not assignable to parameter of type 'FindConditions'.
Object literal may only specify known properties, and 'skip' does not exist in type 'FindConditions'.ts(2769)
FindManyOptions.d.ts(13, 5): The expected type comes from property 'take' which is declared here on type 'FindManyOptions'
(method) Repository.findAndCount(options?: FindManyOptions): Promise (+1 overload)
Finds entities that match given find options. Also counts all entities that match given conditions, but ignores pagination settings (from and take options).

[@iamdeveloper2580]

Hello Thomas, your videos are very awesome, can you help me with search? not to make request on every letter?

[@TommiCodes]

Handle it in the angular Frontend.
for example work with rxjs debouncetime.
E.g. smth like:
this.searchModel.pipe(
debounceTime(300), distinctUntilChanged())
.subscribe();
--> debounceTime - wait 300ms after the last event before emitting last event
--> distinctUntilChanged - only emit if value is different from previous value

[@iamdeveloper2580]

@@TommiCodes In front i did it with axios.CancelToken, which works with real api-s, but on localhost it sends every letter, because of i thought that backend should block,inthe back isnot anything needed?

[@TommiCodes]

@@iamdeveloper2580 copy your code, than i can have a look at what it is doing.
If you implement it in fe correctly, it should be enough --> See my example in my last comment

[@iamdeveloper2580]

​@@TommiCodes it was for beggining: useEffect(() => {
let cancel;
axios({
method: "GET",
url: 'localhost:3030/sales/search',
params: { value: q},
cancelToken: new axios.CancelToken(c => cancel = c)
}).then(res => {
console.log(res.data)
}).catch(e => {
if(axios.isCancel(e)) return;
})
return () => cancel()
},[q])
it worked with real apis, not localhost, than i changed it to something like debounce;
let SEARCHEDLETTER;
const SearchPaper = ({setOpenSearch}) => {
const [value, setValue] = useState("");
const [data,setData] = useState([]);
const handleChange = e => {
e.persist();
setValue(e.target.value);
clearTimeout(SEARCHEDLETTER);
SEARCHEDLETTER = setTimeout(async () => {
let data = await baseURL.get(`/sales/sales/search?value=${e.target.value.toLowerCase()}`);
setData(data.data)
}, 400);
};
return
}
couldnot fint your last comment

[@abidalisidd]

I really don't like this approach of searching with pagination. There should be a single method to handle searching and pagination.
Where clause should append to query only if the user has passed username parameter and pagination should be done auto by the pagination plugin not manually.

[@TommiCodes]

Definetely right.
Later i switch completely to the nestjs-typeorm-paginate package and remove the part where i am doing this myself

[@abidalisidd]

@@TommiCodes
Thanks thomas
I really enjoying this series.
Just one suggestion: code quality should be like professional and production ready.
This will help us more, we can use the code for production.