Szeroka Perspektywa Full-Stack Web Developmentu: GraphQL na froncie

0:00Przygotowałem tutaj prostą aplikację WG jest, która wykorzystuje grę SQL do tego,

0:04aby pobierać dane, które wyświetlamy wewnątrz komponentów.

0:08Tutaj oczywiście stack wykorzystanych narzędzi będzie różnić się w zależności od

0:12frameworka, z którego korzystasz na froncie.

0:15Natomiast ogólna zasada jest taka, że potrzebujemy klienta gra SQL, z pomocą

0:19którego będziemy w stanie nawiązać połączenia z naszym serwerem.

0:23W tym konkretnym przypadku sprowadziło się to do tego, aby w pliku głównym naszej

0:26aplikacji wykorzystać interfejs udostępniony przez pakiet Apollo w celu

0:31przygotowania połączenia z naszym serwerem.

0:33Gra SQL i w moim przypadku znajduje się on na serwerze lokalnym.

0:37Następnie wykorzystujemy tutaj również inne boty w celu zapewnienia wydajności

0:41wynikającej z wykorzystania pamięci podręcznej.

0:44No i na samym końcu mamy samo utworzenie klienta, wykorzystując zarówno adres URL,

0:49jaki dodatkową konfigurację w pamięci podręcznej.

0:52W momencie, gdy mamy już tutaj takie połączenie, wystarczy, że w momencie

0:56tworzenia naszej aplikacji utworzymy naszą aplikację, a wewnątrz metody Setup

1:01przekażemy nasz provider w następujący sposób.

1:04W rezultacie gra SQL będzie dostępny w

1:06ramach całej naszej aplikacji i wszystkich komponentów, które wchodzą w jej skład.

1:10Oznacza to, że jeżeli przeniesiemy się teraz do dowolnego komponentu, będziemy w

1:14stanie wykorzystać funkcję SQL, która umożliwi nam napisanie zapytania SQL,

1:20które z pomocą już Query zostanie przekazane na serwer, a my z pomocą

1:24funkcji Completed będziemy w stanie obserwować te zmiany i ewentualnie

1:28wyświetlić je w momencie, gdy już zostaną pobrane.

1:31Rezultat jest taki, że gdy uruchomimy

1:34naszą aplikację, zostanie wyświetlona lista użytkowników i jeżeli przejrzymy

1:39sobie zakładkę Network to zobaczymy, że faktycznie informacje te pochodzą z

1:43Endpoint SQL, gdzie otrzymaliśmy zestaw danych pasujący do zapytania.

1:48Pomimo tego, że w naszej bazie znajduje

1:50się więcej niż jeden użytkownik, został zwrócony tylko jeden.

1:55Wynika to z faktu, że do naszego zapytania

1:57przekazaliśmy dodatkowe parametry, które zostały odpowiednio zinterpretowane i

2:01wykorzystane przy przygotowaniu odpowiedzi.

2:04Jeżeli teraz podajemy identyfikator

2:06drugiego użytkownika, no to naturalnie wyświetli się on na naszej liście.

2:10Także jeżeli będziesz decydować się już na wykorzystanie.

2:13Gra SQL a w Twojej aplikacji to przede

2:15wszystkim to co stoi przed Tobą to umiejętność pisania zapytań gra SQL.

2:20I tutaj akurat tak jak pokazywałem w poprzedniej lekcji, jest to o tyle proste,

2:24że możesz w tym celu wykorzystać playground.

2:26I tutaj akurat w tym przypadku będziemy

2:28potrzebowali zdefiniować również zmienne, które trafią do naszego zapytania.

2:33Zatem dodałem je tutaj po prostu ręcznie.

2:35Tak napisane zapytanie możemy wykonać, aby od razu podejrzeć rezultat.

2:40Naturalnie, jeżeli zmienne się tutaj zmienią, to zmieni się również odpowiedź.

2:44Natomiast to, co próbuję Ci tutaj pokazać

2:47polega na szybkim wykorzystaniu playground w celu przygotowania zapytania, które

2:51możesz po prostu bezpośrednio wkleić do swojej aplikacji.

2:54Naturalnie te wszystkie elementy, takie jak np.

2:57parametry oraz ich typy muszą być zdefiniowane po stronie serwera.

3:01Zatem w przypadku, gdy projektujesz go

3:03samodzielnie, musisz w pierwszej kolejności to wszystko odpowiednio

3:06zaprojektować, aby następnie móc wykorzystać to w frontendu.

3:10Zatem tak naprawdę jeżeli chodzi o wykorzystanie SQL a po stronie frontendu,

3:14to w przeciwieństwie do REST wymaga on nawiązania połączenia z naszym serwerem.

3:18Aczkolwiek można to porównać do wykorzystania np.

3:21Inter sektora, które konfiguruje

3:23połączenie z zasobami udostępnionymi przez API.

3:27Natomiast drugą, znacznie bardziej

3:28widoczną różnicą jest fakt, że zamiast wysyłać zapytania HTTP, przygotowujemy

3:33tutaj zapytania do gravel, a następnie podłączamy je albo do widoków, albo po

3:38prostu do akcji, która jest w tych widokach są wykonywane, czyli np.

3:42usuwanie bądź edytowanie danych.

3:44Niestety, jeżeli chodzi o nasz zakres materiału, nie będziemy skupiać się na

3:48tym, aby uczyć się tego, w jaki sposób konstruować zapytania SQL po stronie

3:53frontendu, jak i też konfiguracji serwera SQL po stronie backendu.

3:57Jeżeli jednak ten temat Cię zainteresuje, zapraszam Cię do dostępnych materiałów na.

4:02Edu.

4:02PL, które pokażą Ci zarówno jedno, jak i drugie zagadnienie.

4:06Tymczasem w dużym skrócie przede wszystkim

4:08interesuje Cię to, aby wykorzystać klienta SQL po stronie frontendu i najczęściej

4:13będzie to Apollo, który jest dostępny zarówno dla View jak i ja.

4:18Ostatecznie od siebie dodam, że umiejętność pisania zapytań SQL jest

4:22niezwykle przydatna nie tylko na potrzeby rozwoju aplikacji, ale również korzystania

4:27z zewnętrznych API, które możemy potrzebować nawet na potrzeby chwili.

4:31Do tego, aby uzyskać dostęp do jakichś

4:33informacji, które są dostępne tylko za pośrednictwem interfejsu gra wgl.

4:38Z kolei sama umiejętność projektowania serwerów SQL już w większości przypadków

4:43nie okazuje się tak niezbędna, o ile oczywiście rozwijana przez Ciebie

4:46aplikacja nie uwzględnia wykorzystania tej technologii.

4:50Więc jeżeli chodzi o gra w call na froncie to byłoby już na tyle.

4:53W związku z tym dzięki za uwagę i do usłyszenia w kolejnej lekcji.