Gatsby.js: Programatyczne tworzenie strony

2.19.12+

0:00Okej w poprzedniej lekcji udało nam się dodać tło do naszych miniatur

0:04do postów natomiast teraz tak jak obiecałem pokażę ci rozwiązanie które

0:08wykorzystuje gatsby image do tego żeby nasze posty wykorzystywały pełną

0:12moc gatsby sharp plugin więc teraz

0:17jak sobie odpalimy serwer deweloperski to

0:21niech sobie leci a ja ci w międzyczasie pokażę jak to zrobiłem więc tutaj to src

0:25które mieliśmy w poprzedniej lekcji zamieniłem po prostu na gatsby image sharp fluid tracedSVG

0:30nazwa bardzo wpada w ucho wiadomo tutaj mamy w pages podobne

0:34rozwiązanie już przypominam to już robiliśmy tutaj mamy dokładnie to samo w hero image

0:38i teraz to fluid które

0:43tutaj zaciągnąłem przekazuje jako nowy prop tym razem to jest image

0:47czyli mamy featured image child image sharp fluid to

0:51się bierze stąd że we front matter mamy

0:55featured image czyli to co wyciągnąłem sobie tutaj w destrukturyzacji i

1:00ona ma jeszcze zagłębione jakby dwa obiekty child image sharp i fluid

1:05z racji że tutaj mamy fragment to tego już nie podajemy jako

1:09propa wystarczy fluid przypominam ponieważ sam gatsby image

1:13już przyjmuje właśnie fluid jako tego propa i on potrzebuje całego tego

1:17efektu wykonania tego query można tak powiedzieć więc

1:22tak zaimportowałem tutaj gatsby image wiadomo dałem mu kilka stylów które

1:26pozwalają na to żeby on prostu wyglądał normalnie więc żeby nie wychodził poza obręb

1:30rodzica w którym jest preview wrapper ten image

1:35który podawałem tutaj podaję najzwyczajniej w

1:39świecie jako jeden prop fluid i teraz jak sobie

1:43zerkniemy na naszą stronę to nasza strona nie dość że wygląda równie pięknie

1:47jak poprzednio to jeszcze teraz ładuje nam tracedSVG pewnie to widzisz przez

1:51ułamek sekundy przez co nasze obrazki po prostu wyglądają super i

1:55też bardzo szybko się ładują jakby ktoś wszedł z wolniejszym netem na naszą stronę

1:59to na pewno doceni ten mały gest z naszej strony dobra ale od kilku

2:03lekcji zajmujemy się tutaj miniaturami a tak naprawdę postów jeszcze nie mamy na naszej stronie

2:08więc trzeba by było coś z tym zrobić i teraz właśnie stworzymy sobie taki

2:12super prosty layout dla naszego postu który następnie będziemy wykorzystywać do

2:18tego żeby programatycznie tworzyć nasze podstrony właśnie z artykułami

2:22więc teraz może w layouts stworzymy sobie nowy plik który nazwiemy

2:26post js to będzie zwykły

2:30komponent react i tutaj warto dodać że to będzie traktowane podobnie

2:35jak nasza stronę którakolwiek z folderu pages po prostu można

2:39tak to nazwać ponieważ to będzie taki layout taki szablon ale zaraz pokażę ci jaki

2:43feature wykorzystamy do tego żeby gatby właśnie traktował to równoprawnie jako

2:47stronę więc teraz tutaj stwórzmy sobie post layout dobra

3:08i w naszym poście będziemy mieć tytuł autora obrazek i treść naszego

3:13postu na razie oczywiście to jest tylko taki mockup

3:18zaraz

3:22pokażę ci co możemy z tym zrobić wykorzystamy teraz jeden z najpotężniejszych feature

3:27gatsby czyli programatyczne tworzenie stron jak sobie wejdziemy do pliku

3:31gatsby node to możemy się przerazić bo tu jest pusto jest jakiś dziwny komentarz w

3:35ogóle nie wiadomo o co chodzi ale nie bój się skopiowałem sobie tutaj z

3:39tego komentarza link do dokumentacji i

3:44dokumentacja tutaj nam się naprawdę przyda bo ciężko zapamiętać po prostu te wszystkie metody które

3:48możemy wykorzystać w tym pliku różne rzeczy tutaj mamy natomiast my wykorzystamy

3:52jedną bardzo ważną metodę nazywa się create pages create

3:56pages pozwala nam na automatyczne tworzenie stron na podstawie jakichś

4:00danych które wyciągnęliśmy sobie z jakiegoś bloga z jakiegoś api i z jakiegoś

4:04cms z czegokolwiek więc teraz mogę sobie po prostu skopiować

4:09całą zawartość tego przypominam jesteśmy na

4:13create pages w dokumentacji gatsby link do tej dokumentacji

4:17znajdziesz też jako link do lekcji wkleję zawartość

4:21tej dokumentacji tutaj i przeanalizujmy sobie co my tutaj mamy path

4:26oczywiście to jest moduł z node który pozwala nam na dostanie

4:31się do pewnego miejsca na naszym dysku który będzie zawierał w tym przypadku

4:35blog post template oczywiście my już taki

4:39template mamy w folderze layout więc wystarczy że wpiszemy src layouts

4:43post js to jest

4:47nasza ścieżka to jest ten plik który przed chwilą stworzyliśmy on na razie

4:51jest mockupem ale jest więc skoro istnieje to można go wykorzystać i

4:55teraz pamiętasz jak używaliśmy w graphql który

5:00nadal działa all mdx nodes tutaj również to query możemy

5:04sobie skopiować ono będzie nam potrzebne możemy

5:13je sobie nazwać na przykład query post

5:18albo query articles różnica

5:22jest tylko tutaj taka że w dokumentacji mieliśmy zapis z propisem natomiast

5:26ja dużo bardziej wolę ten zapis async await który

5:30różni się tym że po prostu jest krótszy i ładniejszy więc to co musimy zrobić to tutaj przed

5:34nawiasami dodać słowo async tutaj dodać słowa

5:39await jeśli nie znasz zapisu async await to gorąco zachęcam do

5:43obczajenia kursu o javascript gdzie będzie to wyjaśnione natomiast

5:47w gruncie rzeczy jest to bardzo podobne do tego jak byśmy mieli po

5:52tym nawiasie kropka then i dalej jakąś akcję nazwijmy

5:56to sobie result tak jak było tutaj na dole jeden

6:03nawias jest tutaj zbędny i

6:13teraz tak w data mamy trochę inny zapis bo w dokumentacji

6:18używali innego pluginu my tutaj mamy all mdx więc mamy data all

6:24mdx nodes i nodes

6:29przypominam jest tablicą więc później już możemy robić sobie foreach żeby

6:34to było bardziej intuicyjne to możemy sobie zmienić słowo klucz na post i

6:39teraz tak musimy przeanalizować co się tutaj wydarzyło na razie chciałem przygotować

6:43tylko jakby ten plik do działania a za chwilkę zobaczysz o co tutaj w

6:47ogóle chodziła więc mamy metodę create pages która

6:52zawiera pewne predefiniowane dane które możemy sobie wyciągnąć możemy

6:57je sobie zdestrukturyzować pierwszą jest graphql czyli po prostu metoda którą

7:01możemy wykorzystać do stworzenia query graphql to jest bardzo podobne

7:05do importowania z gatsby po prostu graphql do tego żeby robić dokładnie to samo

7:09tylko na przykład w pages i drugie to jest actions actions

7:13to jest obiekt który zawiera pewne akcje jak sama nazwa wskazuje jedną

7:18z takich akcji jest akcja create page która właśnie tworzy nam

7:22nową stronę tak jak byśmy dodali do folderu pages nowy plik po prostu tylko robi

7:27to automatycznie na podstawie jakich danych i instrukcji które my przekazaliśmy więc teraz

7:31zrobiliśmy sobie query w graphql i ono zwraca

7:35nam tablicę z pewnymi danymi skoro jest to tablica to możemy

7:39sobie po niej iterować i przy każdej iteracji przy przejściu do każdego

7:43kolejnego obiektu możemy wywołać metodę create page

7:47czy też funkcję create page i jako argument podać tutaj kilka rzeczy

7:51dzięki którym ta strona zostanie utworzona w poprawny sposób więc

7:56zerknijmy co tutaj w ogóle zostało zawarte przede wszystkim

8:01ścieżka i ścieżka właśnie zawiera ten slug który mieliśmy w każdym mdx to

8:05dzięki niemu możemy utworzyć poprawną ścieżkę ponieważ ścieżka będzie właśnie tam

8:09slash tidy or messy na przykład więc ścieżka

8:13jest super ważna w tym momencie żeby ona była dobrze zapisana i my tutaj

8:18mamy trochę inny zapis mamy tak post kropka front matter

8:22kropka slug nie mamy tego node component czyli

8:26to co tutaj zaciągleliśmy komponent to jest po prostu template do którego będziemy

8:30wlewać treści z tego query które tutaj wyciągnęliśmy z

8:34każdej strony którą bedziemy tworzyć przy pomocy właśnie funkcji create page

8:38i tutaj jeszcze mamy takie specjalne pole które jest naprawdę mega

8:42mega potężne ponieważ pozwala nam na przekazywanie

8:47dodatkowych informacji zarówno do komponentu ale też co

8:51bardzo nam się przyda do graphql query przypominam że post

8:55js znajdujący się w layouts jest traktowany na równi z każdą

8:59stroną to znaczy że można w nim wykorzystywać normalnie graphql query

9:04w ten sposób i co więcej można w nim wykorzystywać zmienne o których

9:08zaraz trochę więcej ci powiem i te zmienne właśnie będą przekawyzane

9:12za pomocą tego kontekstu tutaj zaraz zobaczysz że to jest naprawdę bardzo proste tylko brzmi

9:17tak skomplikowanie więc teraz przejdźmy sobie do oczywiście

9:22wylogowania tego co się tutaj wydarzyło console log result

9:26data all mdx nodes zobaczmy

9:31co w ogóle dostajemy w wyniku tej naszej operacji tutaj na

9:36razie tutaj zostaje pusty obiekt za

9:40chwilkę będziemy się tym wszystkim zajmować musimy przebudować nasz projekt i teraz tutaj

9:44w konsoli powinniśmy dostać wynik tego console loga uwaga zaraz

9:49dostaniemy pewnie spory obiekt jak widzisz dostaliśmy

9:53tutaj 5 postów i na podstawie tych pięciu postów zostały

9:58stworzone strony jak możemy to sprawdzić skopiujmy sobie slug przejdźmy

10:05do naszej strony i zróbmy slash comfortable

10:09bedroom zauważ że został wykorzystany

10:13po prostu nasz template od postów oczywiście on jest

10:17pusty bo jeszcze nie wykorzystuje tych danych które tutaj przesyłamy natomiast one już tutaj zostały

10:22zawarte więc naszym zadaniem w kolejnej lekcji będzie po prostu wykorzystanie tego template'u

10:26i spropagowanie danych właśnie do niego żeby wyświetlić

10:30nasz post