Gatsby.js: Łączenie Gatsby z DatoCMS

2.19.12+

0:00Okej w poprzedniej lekcji udało nam się stworzyć strukturę taką podstawową

0:04strukturę dla modelu article w naszym nowym cms w datocms stworzyliśmy

0:08sobie również query powiedzieliśmy o tym czym są fragmenty i teraz na podstawie tych

0:12danych które datocms nam wysyła chcielibyśmy stworzyć coś co będzie

0:16się dostosowywać do tej struktury która zwłaszcza pojawia się tutaj w article content

0:21czyli jakoś musimy zmapować sobie to wszystko żeby nasz frontend wiedział

0:25jaki komponent do jakiego rodzaju danych przypisać

0:29i to wszystko po kolei najpierw po prostu spróbujmy sobie zaciągnąć jakoś

0:33te dane i tak jak już mówiłem na samym początku kursu do gatsby jest

0:37ponad 1500 pluginów i jeśli istnieje jakiś cms to prawdopodobnie

0:41ma swój plugin dla gatsby więc teraz jeśli wpiszemy gatsby datocms to

0:45pierwsze co nam wyskoczy to gatsby source datocms i bardzo fajnie jest korzystać właśnie

0:49z tego typu rozwiązań no bo one mają pewne prekonfigurowane rzeczy

0:54których my nie musimy później już robić więc po prostu skopiujmy sobie gatsby

0:58source datocms do naszego projektu możemy sobie też od razu skopiować

1:02ten obiekt który tutaj mamy on odpowiada za poprawne skonfigurowanie

1:06tego pluginu wrzucimy go sobie gdzieś może

1:10pod tymi fail systemami teraz

1:16niektóre z tych rzeczy możemy sobie spokojnie wywalić myślę że

1:20nawet wszystkie oprócz api token api

1:25token to jest token który musimy przekazać do api żebyśmy mogli w

1:29ogóle pobierać dane on jest łatwy do zlokalizowania wystarczy że wejdziemy sobie w settings

1:33api tokens my potrzebujemy tylko read only token ponieważ nie będziemy

1:38zapisywać nic z poziomu naszego frontendu do

1:42naszej bazy danych w cms więc tylko read only kopiujemy

1:47sobie ten token wrzucamy go tutaj

1:51i uwaga od razu mówię to nie jest dobra droga tak się nie robi ponieważ

1:56wtedy jeśli zrobimy push do jakiegoś repozytorium na to wrzucimy nasz token do

2:00jakiegoś na przykład publicznego repo i wtedy każdy będzie widział jaki mamy

2:04token każdy będzie mógł z naszego api korzystać więc absolutnie nigdy tego nie robimy musimy

2:09stworzyć sobie nowy plik który się nazywa kropka env

2:14i w środku tego pliku możemy stworzyć sobie po prostu jakoś zmienną ta zmienna

2:18zawarta w env nazywa się zmienną środowiskową ponieważ env

2:23to jest skrót od environment czyli environmental variables po

2:27angielsku datocms możemy sobie na przykład to nazwać albo na przykład api

2:32datocms równa się i tutaj string

2:36i wklejamy nasz token zapisujemy

2:41plik i teraz wszędzie w node wszystkie te pliki

2:45gatsby tutaj które należą do konfiguracji należą do node tutaj

2:49jakby odpalany jest node to jest odpalany w naszej konsoli i wszędzie w node możemy

2:53dostać się do takiego obiektu który się nazywa process i wewnątrz

2:57tego process będziemy mogli dostać się do env jednak żeby

3:01do tego doszło to musimy jeszcze pobrać jeden mały plugin do naszego node

3:05właściwie jedną małą paczkę nazywa się dot env jeśli

3:11sobie ją skopiujemy wpisując po prostu npm install do

3:17dotenv a następnie

3:21na samej górze naszego pliku wkleimy po prostu required dotenv

3:25kropka config to

3:30automatycznie node uzyska dostęp do tego pliku env i będziemy

3:34mieć dostęp do tych zmiennych które tam zawarliśmy tutaj w tej

3:38linijce nie ma żadnej magii to jest po prostu zwykły require czyli ten starszy sposób

3:42na importowanie modułów do javascriptu można

3:46by było to zrobić równie dobrze tak const dotenv równa się require i

3:50później dotenv kropka config ale

3:55ten poprzedni sposób jest po prostu szybszy bo zajmuje jedną linijkę a i tak do niczego

3:59innego niż do po prostu skonfigurowania tego env file nie potrzebujemy tej

4:03paczki więc wystarczy taki oto zapis i teraz jeśli

4:07już skonfigurowaliśmy nasz dotenv i mamy dostęp do naszej zmiennej

4:11to wystarczy że skopiujemy sobie jej nazwę i

4:17wpiszemy process env kropka

4:21api datocms i teraz żeby nie było zrobimy sobie jeszcze gatsby

4:25clean to jest dość poważna zmiana w gatsby więc zawsze wolę sobie wyrzucić ten

4:29cashe i public i wrzucić po prostu wszystko od nowa gatsby develop zobaczymy

4:34co się wydarzy wygląda na to że nasz projekt zbudował się poprawnie więc

4:38teraz przejdźmy sobie do graphql wywalmy wszystko i

4:42spójrzmy co my tutaj mamy po odświeżeniu zobacz że przyszło nam naprawdę

4:47sporo nowych rzeczy tutaj i właśnie mnóstwo z nich jest związanych z datocms

4:51więc teraz spróbujmy sobie na przykład wyciągnąć all dato

4:55cms article nodes spróbujmy

4:59ten o article content i zobacz że ten plugin automatycznie

5:05nam podpowiada te fragmenty i to jest naprawdę świetne bo bez

5:09tego pluginu gdybyśmy posługiwali się jakimś takim surowym pluginem do graphql

5:13po prostu w gatsby to musielibyśmy to pisać a w ten sposób ten

5:18plugin elegancko sobie mapuje to co dostajemy z naszego cms i możemy

5:22po prostu to all fajnie sobie wykorzystać więc teraz

5:27paragraph content heading content image

5:32date naprawdę to jest tak wygodne i

5:36mamy wszystko przejdźmy sobie jeszcze tutaj skopiujmy po prostu to query

5:40które mieliśmy w tym miejscu bo ono było pełniejsze jeszcze miało te pozostałe rzeczy z

5:44artykułu tylko tutaj all articles musimy zamienić na

5:49all datocms article wewnątrz

5:59tego musimy dać jeszcze nodes i dopiero wtedy to

6:07co było tutaj jeśli nam się te nawiasy jakoś tutaj

6:11pokiełbaszą to możemy zawsze kliknąć prettify i wtedy nasze query

6:15wygląda pięknie i znowu coś zepsułem co się teraz wydarzyło musiałem

6:21coś pominąć all datocms article nodes

6:27dziwne

6:34wrzućmy sobie tylko to to działa okej coś tu musiałem zepsuć o

6:42teraz działa możliwe że jakiś tutaj zapodział nam się po prostu nawias

6:46i przestało działać czasami tak bywa można wtedy sobie wyklikać po prostu z tego

6:50panelu po lewej żeby to jednak zaczęło działać wszystko jest okej i

6:54to query możemy wykorzystać teraz wewnątrz na przykład naszego gatsby

6:59node oczywiście tutaj potrzebujemy tylko i wyłącznie informacji

7:04o tym jaki mamy artykuł żeby stworzyć poszczególne strony więc

7:08ja teraz bardzo szybko przepiszę wszystkie nasze artykuły z

7:13lokalnego cms czyli z tych mdx przepisze

7:17je na szybko do datocms żeby można było po prostu zrobić po nich query żeby one wyświetlały

7:22się podobnie jak tutaj może zamiast pięciu po prostu zrobię trzy żeby troszkę przyspieszyć

7:26cały proces ciebie zachęcam do tego samego żeby sobie to po prostu poćwiczyć i przepisać

7:30ja to teraz zrobię na cięciu i wrócimy po tym jak już będę miał to wszystko przepisane

7:35dobra dodałem dwa kolejne artykuły to co jest fajne to zobacz że gatsby

7:39automatycznie wykrywa że zaszła jakaś zmiana w api i ładuje

7:43nam ten nowy content jak później zapodamy sobie znowu query to mamy kolejne

7:47dwa artykuły czyli comfortable bedroom i tidy or messy więc

7:52mamy teraz już trzy artykuły możemy sobie stworzyć z tego coś sensownego spójrzmy

7:56jak to wygląda jak to wygląda tutaj mamy query mamy title i

8:01właściwie do stworzenia stron wystarczy nam tylko ten title więc możemy

8:05sobie skopiować całe to query za chwilę to usuniemy w gatsby node

8:09nie usuwam całego tego query bo później mi się jeszcze przyda więc

8:13tutaj sobie to podmienimy query cms

8:19page okej nawiasy się zgadzają raz

8:24dwa trzy raz dwa trzy mamy teraz trzy artykuły i z

8:28każdego wyciągamy sobie tytuł i teraz z tego tytułu musimy zrobić slug żeby

8:33poprawnie stworzyć adres dla każdej z artykułu i to

8:37nie będzie już takie proste ponieważ nasze artykuły mają tytuły takie że tak powiem dla

8:41ludzi czyli pisane wielkimi literami czyli normalnie ze spacjami

8:45i tak dalej więc możemy sobie stworzyć taką funkcję slugify

8:49albo jeszcze lepiej możemy ją sobie po prostu pobrać z neta ponieważ

8:53jest już coś takiego i nie ma co wymyśleć koła na nowo slugify to jest po prostu funkcja

8:58która podmienia nam takie stringi na takie stringi czyli to o co nam dokładnie

9:02chodzi więc teraz zainstalujmy sobie po prostu nasze slugify

9:06zakładam że to będzie po prostu komenda

9:10npm install slugify możemy

9:14ją sobie pobrać na górze naszego gatsby node zamiast

9:20var używamy const oczywiście i

9:25teraz możemy sobie stworzyć coś takiego przy

9:32każdej iteracji wyciągamy sobie z post nasz

9:37title tylko że o właśnie tutaj też będzie problem bo mamy tak result data

9:42później mamy all datocms article nodes

9:46i reszta już się zgadza i później

9:50w post mamy po prostu kropka title czyli post kropka title

9:55i co my z tym mamy zrobić mamy zrobić slugify

9:59title czyli możemy sobie stworzyć const slugified title

10:03slugify i jako argument dajemy post title

10:08możemy sobie to wylogować i

10:12zobaczyć czy to w ogóle będzie okej czy to będzie działać tutaj

10:18slug możemy dać slugified title tylko że

10:23na razie nasze query nie będzie działać tak jak

10:27trzeba w post js ponieważ tutaj mamy mdx

10:32nadal więc może na tę chwilę sobie po prostu

10:37zakomentujemy to żeby nie wywaliło nam błędu zakomentujemy

10:41sobie to i wtedy to powinno działać dobra

10:45spróbujmy gatsby develop chodzi o to tylko żeby w konsoli

10:49dostać odpowiednie tytuły zobaczyć czy to działa poprawnie możliwe że

10:54nam wrzuci jeszcze jakimś błędem ale może nie zaraz zobaczymy okej

11:00gdzieś odwołuje się do slug tutaj

11:04czyli wylogowało nam pierwsze tidy

11:09or messy a później zrobiło błąd po prostu

11:13bo tutaj już się wywaliło bo odwołujemy się do czegoś czego nie ma więc

11:17musimy zrobić slugified

11:22title i tutaj od razu widzę że jest pewien problem ponieważ mamy wielkie litery

11:26a my nie chcemy więc z racji że slugify zwraca prawdopodobnie

11:30stringa po prostu to możemy zrobić to lowercase i

11:35wydaje mi się że to powinno zadziałać zaraz

11:39zobaczymy jeszcze czy slugify ma może jakiś dodatkowy argument który

11:43można zapodać result

11:48in lower case tak czyli aha okej czyli nie musimy tego robić możemy

11:54podać tutaj obiekt który będzie obiektem z opcjami i w tym obiekcie robimy

11:59lower dwukropek true i życie jest piękne odpalamy

12:05na nowo gatsby develop teraz powinniśmy dostać prawidłowe tytuły a raczej slugi uwaga

12:11mamy tutaj tidy or messy

12:16comfortable bedroom dine and design wszystko się zgadza więc

12:20w tej lekcji udało nam się skonfigurować datocms tak żeby przekazywał do naszego gatsby

12:24dane a w następnej już uporządkujemy sobie sprawy związane z post js

12:28żeby tym razem wyświetlał odpowiednie dane zaciągnięte z cms a nie z naszych mdx