Download "GraphQL #16 Поиск данных в БД (Search Elements in DB)"

"videoThumbnail GraphQL #16 Поиск данных в БД (Search Elements in DB)

Как СЕСТЬ на ЛОШАДЬ в Unreal Engine - Создание игры. Урок 23

Как СЕСТЬ на ЛОШАДЬ в Unreal Engine - Создание игры. Урок 23

Channel: MakeYourGame!

CSS3 #4 Псевдоэлементы и псевдоклассы (Pseudo-elements & Pseudo-classes)

CSS3 #4 Псевдоэлементы и псевдоклассы (Pseudo-elements & Pseudo-classes)

Channel: webDev

JavaScript Паттерны #10 - Composite (Компоновщик)

JavaScript Паттерны #10 - Composite (Компоновщик)

Channel: webDev

Полный курс Laravel 09 Страницы и мой опыт + Вёрстка (Pages)

Полный курс Laravel 09 Страницы и мой опыт + Вёрстка (Pages)

Channel: One Code

Начальный курс SQL.Удаление данных DELETE

Начальный курс SQL.Удаление данных DELETE

Channel: Igor Vovchenko

Создание сайта на 1С Битрикс - #20 - Как пользоваться GetList

Создание сайта на 1С Битрикс - #20 - Как пользоваться GetList

Channel: loftblog

Основы Программирования - #6 - Условия

Основы Программирования - #6 - Условия

Channel: loftblog

Node.js #20 Загрузка приложения на Heroku (Deployment On Heroku)

Node.js #20 Загрузка приложения на Heroku (Deployment On Heroku)

Channel: webDev

Node.js #8 Создание сервера (Create Server)

Node.js #8 Создание сервера (Create Server)

Channel: webDev

web

develop

front-end

frontend

веб

разработка

программирование

обучение

education

tutorial

лекция

образование

graphql tutorial

learn graphql

apollo client

mlab

react

reactjs

react js

graphql tutorial for beginners

graphql apollo

graphql react

graphql уроки

graphql введение

graphql для начинающих

graphql запросы

graphql как работает

graphql обзор

graphql руководство

graphql туториал

graphql overview

apollo graphql

react graphql apollo tutorial

react graphql

yauhenk

webdev

graphql

00:00:00

[music]

00:00:13

I welcome you my name is Evgeniy

00:00:15

Kovalchuk and you are on the webtv channel

00:00:18

welcome final lesson

00:00:20

on graphics libraries Wayne we

00:00:23

have done a good job on the functionality of

00:00:25

our application,

00:00:27

however I would like to add one more

00:00:29

feature that can be found quite often

00:00:32

is filtering or searching for

00:00:35

values

00:00:37

in a given at the moment we are simply displaying

00:00:39

our data, however, if there is a lot of it, it

00:00:42

would be nice to add the ability to

00:00:44

search for specific values, so

00:00:48

let’s go again, to save time

00:00:51

and not be distracted by creating components,

00:00:54

I created a search component in advance, we

00:00:57

will have two of them, let’s vectors search &

00:01:00

movies

00:01:01

as you understand from the name these will be

00:01:04

search strings for directors and

00:01:07

films in the yuan,

00:01:09

these are ordinary input and with a magnifying glass sign and it

00:01:13

is implied that when we enter a

00:01:15

value in the field and press enter our

00:01:19

data should be filtered, let's

00:01:22

start with the implementation of films

00:01:24

and, to be precise, with a modification

00:01:27

scheme we already have a root movies

00:01:30

which returns all movies let's

00:01:33

expand the functionality of this query

00:01:35

by teaching it to accept a

00:01:38

name argument and using this argument we will look for the

00:01:42

value of the movie name and return

00:01:44

a match

00:02:02

as you can see now our query

00:02:05

accepts a name argument and it's

00:02:08

just a regular string after which

00:02:12

I pass the name to the fine method and look for the corresponding

00:02:16

value of the object that is inside the

00:02:19

fine method, this is the technical syntax of Mangus,

00:02:22

there is nothing complicated in it, we

00:02:25

use regex, in fact it is an analogue of a

00:02:29

regular expression

00:02:30

which in our case takes

00:02:33

the name passed to it

00:02:35

actions these are the parameters of the options as it

00:02:38

should a search occurs the letter oh

00:02:41

means that the search query will not be

00:02:44

case sensitive and we

00:02:47

will search only by the name of the movie super

00:02:50

query we have updated

00:02:51

now accordingly we need to update the

00:02:54

mutation go to the movies folder Mabel and

00:02:58

update the query string

00:03:03

as you can see the query itself

00:03:06

has not changed much we just taught it

00:03:08

accepts name values, this is the value

00:03:11

it will use in subsequent

00:03:14

requests, the next thing we need to do is

00:03:17

update the wrapper component for our

00:03:20

table, we need to do this, and how we

00:03:23

changed the base query and now it

00:03:26

accepts a value, but when rendering

00:03:29

the component, we don’t pass anything to my this

00:03:32

situation is needed fix it,

00:03:51

well, now we need a

00:03:54

table component in it, we need to add the

00:03:57

following logic, firstly, the search field

00:04:00

must become controlled, that is, the

00:04:03

value that we enter into it

00:04:05

must fall into the cost of the component,

00:04:09

since these are the values we must

00:04:11

use for the search query,

00:04:15

secondly we need to add logic so that

00:04:18

when we press enter the request with the

00:04:21

summarized values will fly into our

00:04:23

database, let's immediately add all the

00:04:26

necessary logic and

00:04:27

then analyze it,

00:05:14

ready to stand we have a new

00:05:18

name field, this will be the search argument,

00:05:20

then we have the

00:05:23

nl change method with this method we

00:05:27

will just change the

00:05:28

name fields and the last method is the angel

00:05:31

search the method itself accepts the

00:05:33

event object the event object itself

00:05:36

I use to understand which

00:05:39

button is pressed and if it is in the winter and the

00:05:43

enchant code is 13

00:05:46

I carry out this check and if

00:05:48

successful when sending a request to this request in

00:05:52

rails, I pass name or the name that

00:05:56

I enter into the search field and the second

00:05:58

required parameter is update carry,

00:06:01

it accepts a function and describes how

00:06:04

the update should happen in our

00:06:07

case, we send a request with

00:06:09

arguments and receive new data

00:06:12

super now all these values we need to

00:06:16

pass search to the search component,

00:06:34

and now we apply these props

00:06:37

directly inside the component itself,

00:06:57

but that’s all here, I think there’s

00:06:59

no need to explain anything,

00:07:01

now let’s try to carry some

00:07:04

value to the search field

00:07:08

and press enter

00:07:10

personally, everything works and let’s do

00:07:13

the same the best thing for searching for directors,

00:07:16

in fact, it will be the usual copy-paste, we

00:07:20

start by updating the qiwi graph

00:07:22

or queries with the schema

00:07:29

as you see directors, but

00:07:32

we will search by name, now we update the

00:07:35

query director of the square,

00:07:43

now we update hawk,

00:07:50

great, now we add the necessary

00:07:54

methods of the company

00:07:55

tables, you can generally just copy them,

00:08:05

we transfer everything values of the company

00:08:07

and time

00:08:08

serge

00:08:16

and the latter we also apply these

00:08:19

processes inside the component give vectors

00:08:23

search is

00:08:30

ready now we can try to

00:08:33

search for the director

00:08:37

and as you can see everything works great,

00:08:39

however it should be noted that the picture is not so

00:08:43

happy since

00:08:45

we added one feature for implement of 2

00:08:48

bugs, the first is that when we open a

00:08:51

modal window for adding directors,

00:08:53

we have a list of directors. 2 is that

00:08:58

when creating,

00:08:59

editing and deleting, our

00:09:02

application forgot how to dynamically

00:09:04

show changes. Both of these problems are

00:09:07

related to the fact that we updated the queries

00:09:10

from this wind and because the fact that we

00:09:13

have connections between collections and

00:09:16

dynamic updates after mutations,

00:09:18

all old query options need to be

00:09:21

updated

00:09:22

first, we can fix each other ladies with

00:09:25

directors, for this we go to the

00:09:28

movies for ms component wrapper and

00:09:31

add the following changes,

00:09:48

done, well, now the previously created

00:09:52

wrapper we don’t need an additional plus,

00:09:54

as you remember, for the movies form, we have now

00:09:59

created a separate koryu for requesting

00:10:02

directors in this kryu, we also need to

00:10:06

add name,

00:10:11

save and look, now

00:10:15

open the modal window

00:10:18

as you see, now we have directors,

00:10:21

great, one bug has been fixed, now we

00:10:25

need to go over for all our mutations

00:10:28

and correct the prefetch qr and that is, in addition to the

00:10:31

request to pass the variable into it,

00:10:45

I changed the VI update movie for operations

00:10:48

and it remains to change for the operation

00:10:51

David,

00:10:54

well, now we can

00:10:56

try to switch to our yulai and

00:10:58

create a movie, edit it and

00:11:01

delete that is, go through the entire

00:11:04

interface of multiple operations:

00:11:07

creation, editing is successful,

00:11:13

and deletion also works. Well, now let’s

00:11:16

fix it in the same way for directors,

00:11:20

first in the files director of forms

00:11:27

and in the dialog box

00:11:28

I’m remote,

00:11:31

save, go to the directors tab

00:11:34

and try to create

00:11:37

change in the same way and removing the director

00:11:44

is great, now we have everything ra

00:11:47

and since before, plus in addition, you and I

00:11:50

noticed the search for elements and a

00:11:53

huge plus is that we

00:11:56

reviewed the case with you and updated

00:11:59

requests and fixed bugs associated with

00:12:02

these changes and now our

00:12:05

application completely ready I am often

00:12:08

asked the question of what works

00:12:10

to add to a portfolio, where to get them and how to

00:12:13

come up with them. In my opinion, if you

00:12:16

took this course and wrote this

00:12:18

application

00:12:19

with me, you got an excellent

00:12:22

candidate for a portfolio of works,

00:12:24

if you are not satisfied with

00:12:27

the functionality we wrote, you can do it perfectly

00:12:30

expand independently abandon

00:12:32

tabs and go to pages

00:12:34

by adding a router add a search by

00:12:37

different values sorting

00:12:39

pagination

00:12:40

add a new collection and make

00:12:43

additional connections and so on

00:12:45

the possibilities are limited only by your

00:12:48

imagination you can find all the code for this course of lectures

00:12:52

in the get up repository link in the

00:12:55

description

00:12:56

That's all for me, I hope you

00:12:58

liked it, don't forget to subscribe

00:13:01

to the channel so you don't miss the

00:13:03

next lessons and put a like under the

00:13:05

video, see you in the next course bye

00:13:09

[music]

Description:

Всех приветствую в курсе «GraphQL». В данном видео-курсе мы с вами разберём библиотек GraphQL. GraphQL – фактически это язык запросов или синтаксис, который описывает как запрашивать данные, созданный в компании Facebook в 2012 году. Его разработали в качестве альтернативы REST-архитектуры. Он позволяет клиенту запросить лишь желаемые данные. За все отвечает именно клиент. Т.е. GraphQL можно использовать не только на серверной, но и на клиентской стороне. Он имеет три основные характеристики: - Он позволяет клиенту точно указать, какие данные ему нужны. - Облегчает агрегацию данных из нескольких источников. - Использует систему типов для описания данных. ✒ Репозиторий курса: ✔ GitHub: https://github.com/YauhenKavalchuk/graphql ✒ Используемые ресурсы и инструменты: ✔ Atom (Редактор кода):https://github.blog/2022-06-08-sunsetting-atom/ ✔ Create React App (Рабочее окружение): https://github.com/facebook/create-react-app ✔ mLab (База данных): https://mlab.com ✔ Material-UI (Интерфейс приложения): https://mui.com/material-ui/ ✔ Apollo Client: https://www.apollographql.com/docs/react/ ✒ Полезные ссылки: ✔ Graphql (Документация):https://graphql.org/learn/ ✒ Полезные курсы на канале: ✔ ES6: https://www.youtube.com/playlist?list=PLNkWIWHIRwMGLJXugVvdK7i8UagGQNaXD ✔ React & Redux: https://www.youtube.com/playlist?list=PLNkWIWHIRwME_Gv2vlWAR6TfeSXylYfw4 ✒ Полный список готовых и планируемых курсов: ✔ Trello: https://trello.com/b/R6rD7qq8 ✒ Автор курса: ✔ YouTube: https://www.youtube.com/YauhenKavalchuk ✔ Instagram: https://www.facebook.com/unsupportedbrowser ✔ Twitter: https://twitter.com/YauhenKavalchuk ✔ VK: https://vk.com/YauhenKavalchuk ✔ LinkedIn: https://www.linkedin.com/in/YauhenKavalchuk ✔ GitHub: https://github.com/YauhenKavalchuk ✔ VK (Группа): http://vk.com/webdevcom ✒ Поддержать развитие канала: https://github.com/YauhenKavalchuk/youtube/blob/main/sponsoring.md

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "GraphQL #16 Поиск данных в БД (Search Elements in DB)" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "GraphQL #16 Поиск данных в БД (Search Elements in DB)" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "GraphQL #16 Поиск данных в БД (Search Elements in DB)" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "GraphQL #16 Поиск данных в БД (Search Elements in DB)" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "GraphQL #16 Поиск данных в БД (Search Elements in DB)"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "GraphQL #16 Поиск данных в БД (Search Elements in DB)"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.