Next.js 13 w Praktyce: Pobieranie danych

0:00Dobrze.

0:00Teraz, kiedy już mamy dane naszego użytkownika w naszej bazy danych.

0:03Musimy zacząć się odczytywaniem tych danych.

0:06W naszym komponencie Dashboard Page możemy zacząć tutaj od tego, że

0:11ten komponent to jest komponent już przerobiłem na komponent asynchroniczny,

0:15dlatego, że jest to komponent po stronie serwera.

0:17Dlatego musimy teraz zadbać o to,

0:20żebyśmy mieli jakieś dane czy const data równa się.

0:24I w tym momencie możemy zapisać data.

0:28Nie mamy oczywiście tej funkcji, jeszcze musimy to ładować.

0:31I w tym momencie przejdźmy do góry i

0:33stworzymy naszą funkcję, która będzie odpowiedzialna za to, żeby pobrać

0:36odpowiednie subskrypcje danego użytkownika.

0:39Czyli const data for dashboard

0:41równa się i tutaj i w naszym przypadku mamy tutaj funkcję.

0:47Pierwsza rzecz, którą będziemy potrzebować

0:48to na pewno będziemy potrzebowali ID naszego użytkownika.

0:51I tutaj z pomocą przychodzi nam komponent, mianowicie Hug.

0:56Funkcja, którą możemy używać po stronie serwera zaimplementowana w kleryków,

1:01mianowicie Out, czyli tutaj możemy sobie zrobić const user id i pobierzemy to z

1:08naszego z naszego Harpera out, który pochodzi właśnie z kleryka.

1:13To tutaj będzie w formacie string albo null.

1:15Czyli tutaj możemy teraz zająć się pobieraniem naszych danych, czyli cache.

1:20I tak najpierw jeżeli nie mamy User ID to chcemy sobie po prostu zrobić.

1:27Tutaj oczywiście mógłbyś sobie zaimplementować rzucenia jakiegoś wyjątku,

1:31że użytkownik nie jest autoryzowany i redirect na np.

1:35na login.

1:35Natomiast w chwili obecnej sobie to zostawimy.

1:38Raczej jak lądujemy na dashboard to jesteśmy zalogowani.

1:41Kwestia tego czy token będzie nieaktywny

1:44już to wtedy pewnie będzie trzeba było obsłużyć jakiś taki przypadek.

1:47Natomiast my skupimy się na HEPA i jeżeli chodzi o dane to const rest

1:52i w tym momencie użyjemy Prisma subskrypcji Find many.

1:58I tutaj musimy powiedzieć w jaki sposób szukamy tych danych w piśmie.

2:02Jeżeli chodzi o selekcję dla kogo chcemy te dane to

2:06zaznaczamy to Work i one raid to musi być nasz user ID.

2:13Czyli szukamy wszystkich subskrypcji

2:16usera o danym ID czyli ID usera, który jest zalogowany w naszej aplikacji.

2:21Jeżeli chodzi o kolejną rzecz, czyli to co

2:23chcemy również pobrać subskrypcje sami to mamy tam relacje.

2:27Subskrypcje mają płatności, także fajnie byłoby to od razu za jednym kole pobrać.

2:31Będziemy potrzebowali tego do naszego komponentu ze statystykami.

2:34Jeżeli przyjrzymy się tej firmie to zobaczymy, że tak naprawdę

2:39będziemy potrzebowali też do statystyk tego wszystkiego.

2:43Tutaj mamy komponent ze statystykami i tutaj te będą potrzebne.

2:47Poza tym w Wordzie pokazujemy tutaj w tym miejscu nasze płatności, dlatego też

2:52będą one potrzebne już przy pierwszym call.

2:55Wróćmy do naszego edytora kodu I tutaj możemy sobie zrobić

2:59payments i ustawić tą flagę na true, że chcemy pobrać też payments.

3:04Jeżeli chodzi o ostatnią rzecz to

3:06widzimy na naszym okapie, że payments są jakby posortowane domyślnie.

3:14Tutaj datami sennymi, czyli od tej daty naj starszej do tej naj naj młodszej.

3:22Czyli wróćmy się do naszego tutaj pobierania naszych danych.

3:27Jeżeli chodzi o sortowanie automatyczne przy pobieraniu danych z firmy to możemy

3:31wykorzystać order by i pole Next payment datę naszej subskrypcji i ustawić to NAS.

3:38W tym momencie dostaniemy dane, które już są poprawnie posortowane.

3:43Natomiast jeżeli chodzi tutaj o obsługę tego wyjątku, jeżeli coś pójdzie nie tak

3:46to możemy sobie zrobić trochę nie fair, bo tutaj możemy sobie zapisać failed tu data.

3:56To na chwilę obecną powinno nam wystarczyć.

3:59Jeżeli chodzi o nasze dane możemy sobie je wylogować console log data

4:04i w tym momencie już powinniśmy widzieć jakiś wynik w w.

4:08Jeżeli odświeżamy naszą stronę, powinniśmy

4:10widzieć jakiś wynik w naszym w naszym tutaj terminalu.

4:15Dlatego widzisz mamy blokowane dane.

4:18Dlaczego i dlaczego ich nie zobaczymy

4:19tutaj, jeżeli sobie wezmę inspektor jeżeli sobie wezmę konsolę tutaj, to jak?

4:23Odświeżę sobie tę stronę?

4:24Zauważ, że nie widzimy tutaj żadnych danych.

4:26Jest jakiś błąd extension, który mam tutaj

4:29zainstalowany w przeglądarce, natomiast nie mamy naszych danych wylogowania.

4:32Dlaczego?

4:33Dashboard na chwilę obecną jest

4:35komponentem po stronie serwera, dlatego jeżeli chodzi o logi to możemy je

4:39odczytywać tylko i wyłącznie tak naprawdę w terminalu.

4:43Na chwilę obecną dobrze jak mamy już te dane.

4:45Od teraz spróbujemy sobie zbudować nasz komponent, który jest odpowiedzialny za

4:50statystyki naszych subskrypcji, naszych płatności.