Gatsby.js: Czym jest Static Query?

2.19.12+

0:00Okej zaczynamy kolejny rozdział tego kursu ale zanim ruszymy dalej

0:04zanim pokażę ci jak utworzyć taki prosty cms wewnątrz gatsby za

0:08pomocą plików mdx o których zaraz się trochę więcej dowiesz to muszę

0:12ci pokazać jeszcze jeden sposób na pisanie queries żeby zaczytywać dane

0:16do konkretnych komponentów do tej pory mówiłem ci jak tworzyć takie query

0:20wewnątrz komponentów które są zawarte w folderze pages lub

0:25też tworzone przez api właśnie gatsby w taki sposób że traktowane

0:29są jako osobne strony w dalszej części tego kursu wyjaśnię ci jaka

0:33jest różnica między tym co znajduje się w folderze pages a tym o czym przed chwilą wspomniałem ponieważ

0:37to tworzenie stron takie programatyczne będzie wykonywane za pomocą pliku

0:42gatsby node ale to taka ciekawostka tylko na przyszłość na razie sobie tym nie zaprzątaj

0:46głowy natomiast jeśli mamy jakiś inny komponent nazwijmy

0:50go na przykład sobie nie wiem stwórzmy w components post

0:55na przykład zrobimy sobie taki folder zrobimy sobie taki komponent

0:59zaimportujemy tu oczywiście react niech

1:05to będzie taki zwykły komponent funkcyjny który nam zwraca zwykły

1:10tekst na razie nic więcej musimy go sobie jeszcze wyeksportować

1:15i teraz na stronie

1:19głównej spróbujmy go sobie gdzieś zamontować powiedzmy

1:23że gdzieś tutaj w okolicach naszego headera

1:27on się automatycznie zaimportował dobra odpalmy

1:32naszą stronę i mamy tutaj nasz

1:36komponent i teraz w graphql zaczytajmy sobie jakieś proste

1:40dane mamy na przykład takie super proste query każda strona w gatsby ma swoje

1:44metadata które zawarte jest tutaj w config na

1:49samej górze mamy site metadata możemy tu wpisać co chcemy ale mam na przykład coś

1:53takiego jak description i to sobie teraz wykorzystamy możemy to

1:57site metadata zaczytać właśnie w taki sposób że wczytujemy site site metadata i

2:01jakiś klucz z tego obiektu który został zawarty w configu w ten sposób dostajemy

2:05właśnie ten opis który przed chwilą ci pokazałem w gatsby config i

2:10teraz załóżmy że chciałbym w tym komponencie post zaczytać

2:16sobie jakieś dane jeśli ten post znajdowałby się w folderze pages to

2:20mógłbym zrobić po prostu coś takiego export query

2:24const query tutaj

2:30sobie zaczytamy graphql z gatsby stworzymy

2:38takie proste query kopiujemy klamry

2:42pyk i

2:49teraz w momencie jeśli to by się znajdowało w folderze pages to tutaj mógłbym

2:53sobie zdekonstruować data tak jak robiłem to na przykład w index js i

2:58tak jak wcześniej tłumaczyłam wtedy to dzieje się auto magicznie po prostu

3:02gatsby z tego miejsca ładuje sobie te dane z query i wrzuca

3:06je do data które możemy sobie zdekonstruować jako props i wciągnąć

3:10tutaj wykorzystać jakoś w naszym komponencie zobacz co się stanie w momencie

3:14kiedy zrobię to samo tutaj zrobimy sobie console log data

3:18żeby zobaczyć co nam wypluje nasz komponent

3:23a

3:33mamy jeszcze jakiegoś jednego console loga w naszym

3:38indeksie który nam psuje całą zabawę więc tamstąd go sobie wywalimy i

3:43wydaje mi się że muszę przebudować projekt więc zrobię jeszcze raz

3:47gatsby develop i zaraz zobaczymy

3:52czy wtedy pojawi się ten console log okej

3:57pojawił się console logs post js tutaj mamy informacje

4:01o tym i jak widzisz data jest undefined wynika to właśnie z tego

4:05czym mówiłem czyli nasz post nie jest zawarty w folderze pages przez

4:09co przez gatsby nie jest traktowany jako strona tylko jako zwykły komponent więc jeśli

4:13chcemy wykorzystać jakieś graphql query wewnątrz komponentu zwykłego

4:17to musimy to zrobić troszeczkę inaczej musimy wykorzystać coś co się nazywa static query

4:22i mamy tutaj dwie opcje najpierw pokażę ci pierwszą

4:26trochę starszą moim zdaniem dużo mniej wygodną ale warto o nich wiedzieć jest

4:30to po prostu zwykły komponent static query jeszcze

4:34raz sobie skopiuję te query stąd i ten static

4:38query po prostu wykorzystujemy w taki sposób że wrzucamy go do

4:42naszego komponentu i on przyjmuje dwie rzeczy pierwsze to query

4:46a drugie to render które

4:51możesz znać moich kursów o react jest to po prostu nic innego jak render

4:55props typowy który może nam zwrócić jsx

4:59ale najpierw wpiszmy sobie to graphql query tutaj

5:04na

5:11razie robię to dość szybko ale zaraz zobaczysz wszystko wyjaśnię jeszcze krok po kroku

5:15póki co niech się to tylko pojawi zmienimy

5:23sobie tutaj data na props tutaj załadujemy jeszcze raz gatsby pisze

5:28gatsby develop w mojej konsoli i jak

5:37widzisz mamy tutaj normalnie w console logu sites site metadata description

5:42czyli dokładnie to o co tam chodziło mogę sobie tu nawet zdekonstruować

5:47i

5:57teoretycznie wszystko powinno działać zobacz i wyrenderowałem

6:02teraz to co zaciągnęłam sobie w query tutaj jako dane teraz

6:07jeszcze raz po kolei co tu się wydarzyło wykorzystaliśmy specjalny komponent który

6:12należy do biblioteki gatsby który możemy sobie

6:16użyć normalnie jako komponent w naszym jsx i ten komponent przyjmuje dwa szczególne

6:20propy jeden to query w którym możemy sobie wpisać

6:24graphql query oczywiście z wykorzystaniem wcześniej za importowanego graphql

6:28żeby gatsby wiedział co my tutaj w ogóle wpisujemy a drugi to

6:32render który jest klasycznym render propem takim jak uczyłem kursach

6:36o react w moich poprzednich kursach na eduweb i render prop jest niczym

6:40innym jak po prostu propem który przyjmuje funkcje z której możemy sobie wyciągnąć

6:44pewne dane które zostały przez jakiś inny komponent po prostu wstrzyknięte do

6:48tej funkcji a następnie wykorzystać te dane zwracając po prostu z funkcji

6:53w render propach jsx który po prostu będzie zawierać

6:57te informacje zawarte tutaj jeśli jest to dla ciebie totalnie

7:01dziwne i pierwszy raz coś takiego widzisz to zachęcam cię do zobaczenia mojego trzeciego kursu czyli

7:05react zaawansowane techniki i tam właśnie dokładnie tłumaczę jak

7:09działają render propsy myślę że to jest bardzo ważne żeby rozumieć jak

7:13to działa ponieważ w gatsby dość często możemy to zauważyć ale jeśli

7:17dobrze wiesz już co tutaj się wydarzyło to teraz pokażę ci nową szkołę jakby

7:21nowy sposób na robienie tego samego czyli wykorzystanie static query jak się

7:25pewnie domyślasz wszystko ostatnio w react zostało przepisane na hooki i nie inaczej

7:29jest ze static query które wcześniej było komponentem a teraz może być również po prostu

7:34hookiem tylko że z gatsby a nie react dobrze

7:38wiesz że można tworzyć custom hooki i teraz takie query

7:42możemy stworzyć w taki sposób podobnie

7:51jak tutaj podaliśmy query jako prop tutaj możemy podać query jako

7:56argument do funkcji nie musimy wtedy się bawić w te

8:00render propy tutaj które mimo wszystko nie są jakoś

8:04super czytelne jeśli mam możliwość

8:08uniknięcia tego to zawsze to robię i zwracamy

8:13po prostu coś takiego z tym że tutaj będzie data site site

8:17metadata description bo jeszcze nie mamy tego

8:21zdestrukturyzowanego i teoretycznie

8:26nasz komponent powinien działać idealnie jest super

8:30zmieńmy sobie title na przykład zobaczymy czy czy

8:34to query faktycznie działa czy nic nam się nie zapisało czasem w cache zobacz zmienił

8:38się teraz tytuł pozostawiam tobie kwestie

8:42wyboru tego czy wolisz static query jako komponent czy jako hook ale

8:47zauważ że hook jest dużo bardziej czytelny można jeszcze robić coś takiego ja często coś takiego

8:51robię w projektach takich większych że query po prostu sobie wrzucam tutaj jako

8:57const już go nie eksportuje po prostu wrzucam go w tym miejscu i

9:01wtedy zapis tego komponentu jest po prostu taki czystszy ładniejszy mamy tutaj po

9:05prostu query które jeśli chcemy możemy sobie podejrzeć ale nie rozwala

9:09nam całego komponentu tym dość obleśnym stringiem który jest jednak tutaj taki

9:13długi więc jeśli zajdzie taka potrzeba ja będę

9:17zawsze używał hooka w tym kursie uważam że hook jest dużo fajniejszy natomiast chciałem

9:21ci pokazac jak możemy właśnie korzystać z graphql wewnątrz komponentów które

9:25nie są zawarte w pages tylko właśnie są zwykłymi komponentami i to

9:29tyle jak widzisz nie jest jakoś super trudne tylko trzeba właśnie znać różnicę jak

9:34zaczytywać do stron graphql i jak zaczytywać do komponentów a

9:38w następnej lekcji już zaczynamy zabawę z mdx