Gatsby.js: Sposoby ładowania obrazków

2.19.12+

0:00Okej skoro już wiemy jak korzystać z graphql wiemy jak on działa to teraz

0:04czas na przejście do właściwego developmentu proponuję ci zacząć

0:08od branch numer 4 którego przed chwilą stworzyłem ponieważ tutaj dodałem

0:12komponent button którego nie będziesz musiał musiała stalować podczas wykonywania

0:17kursu i po prostu będzie nam łatwiej zaczynać właśnie od tego momentu w

0:21tej lekcji pokażę ci jak obsługiwać obrazki i jak można to było robić kiedyś

0:26jak gatby obsługuje to w taki swój autorski własny nowy sposób

0:30mam już odpalone tutaj środowisko deweloperskie zarówno

0:34graphql jak i zwykłą stronkę

0:38to się zawsze robi automatycznie nie musisz się tym przejmować więc teraz pokażę ci

0:42jak wygląda nasza strona wygląda ona w taki sposób tak jak już mówiłem mamy

0:46tutaj nowy button to jest nowy komponent który został dodany przeze mnie do branch

0:51numer cztery a to musimy osiągnąć tak musi wyglądać nasza strona

0:55na szczęście layout jest naprawdę prosty zrobimy go sobie na grid żeby było jak

0:59najszybciej się da natomiast to co jest tutaj wyzwaniem to właśnie

1:03ten obrazek najpierw pokażę ci jak można by było

1:07to zrobić po staremu czyli wykorzystując zwykły link czy też

1:11ścieżkę do obrazka możemy najpierw sobie zrobić img teoretycznie

1:15tutaj powinien być od razu background image na jakimś div no bo jednak to jest taki

1:19ozdobnik do ero ale pokażę ci jedną i drugą wersję i decyzję pozostawiam tobie

1:23więc pierwsze co moglibyśmy zrobić to podać

1:27po prostu ścieżkę do naszego obrazka i teraz ta ścieżka żeby

1:32zadziałała pamiętaj że gatsby automatycznie kopiuje sobie rzeczy do folderu public

1:36i nie mamy za nad tym za bardzo władzy ponieważ on sobie

1:41za pomocą graphql właśnie to wszystko elegancko parsuje wrzuca sobie do folderów

1:45które sam nazywa więc jeśli chcemy to zrobić przez graphql tak

1:49jak zrobimy to poprawnie już za chwilę to spoko ale jeśli chcesz jakiś

1:53asset jakieś jakąś ikonkę jakieś zdjęcie jakiś obrazek wrzucić

1:57sobie tak żeby on na pewno znajdował się w dokładnie tym miejscu którym chcemy

2:02i żeby nazwa nie została zmieniona to możemy sobie w root

2:06folderze naszego projektu czyli w naszym przypadku hatta website

2:10stworzyć folder static po prostu on musi się tak

2:14nazywać i załóżmy że skopiujemy sobie hero jpg

2:19do folderu static i w tym momencie jeśli wejdę sobie do mojego index

2:23i podam tutaj ścieżkę która jest

2:27najprostsza na świecie czyli slash hero jpg to

2:33zauważ że na naszej stronie pojawi się obrazek więc wszystkie rzeczy które

2:37skopiujemy do folderu static zostaną przez gatsby automatycznie skopiowane do folderu

2:41public i wrzucone luzem poza jakimkolwiek folderem a teraz

2:45zobaczmy co by się stało gdybyśmy mieli tutaj jakiś podfolder na przykład

2:49photos i to tutaj przeniesiemy

2:53sobie nasz obrazek nasz obrazek nadal działa ale

2:58jeśli zajrzymy sobie do folderu public to zobaczymy że mamy tutaj teraz hero

3:02jpg ale mamy też folder photos hero jpg czyli

3:07tak naprawdę gatsby zapisał sobie i jedną i drugą wersję tego co

3:11mieliśmy wcześniej czyli przed przeniesieniem do folderu photos i po przeniesieniu do folderu

3:15photos wynika to z tego że gatsby nie zawsze robi taki clean build czyli

3:19nie zawsze wywala wszystkie pliki tylko często właśnie

3:23w tej fazie developmentu buduje sobie rzeczy w oparciu o to

3:27co już wcześniej zbudował żeby po prostu ten build leciał szybciej więc jeśli

3:32chcemy sprawdzić czy faktycznie to działa to możemy zrobić taką

3:36komendę którą ci teraz pokażę nazywa się gatsby clean która

3:43robi nic innego jak usuwa folder cashe i folder public żebyśmy

3:47następnie mogli zbudować sobie czystą wersję tego build który mamy teraz

3:51taka rada też na przyszłość jeśli coś ci nie działa z gatsby jeśli

3:55dzieją się jakieś takie dziwne błędy to bardzo prawdopodobne że po usunięciu folderu cache

4:00one znikną one często na przykład się pojawiają w momencie gdy zaczytujemy jakieś

4:04dane z api i na przykład coś tam się dziwnego wydarzyło

4:08także warto od tego zaczynać debugowanie żeby prostu to wywalić to nas nic nie kosztuje oprócz tego

4:12że musimy chwilkę dłużej poczekać na zbudowanie kolejnego builda wpisałem teraz

4:16gatsby develop i zaraz zobaczymy co się wydarzy w naszym projekcie po

4:21zbuildowaniu naszego nowego projektu zauważ że jak wrócimy

4:25sobie naszej strony to obrazek się wywalił dlatego że mamy czysty build

4:29który już nie ma tego hero na wierzchu ma tylko folder

4:34photos a ta ścieżka która tutaj jest odwołuje się właśnie do

4:38zawartości folderu public zawsze o tym pamiętaj nie do tych tutaj

4:42assetów które mamy w src czy w root folderze zawsze ten

4:46pierwszy slash symbolizuje folder public i warto to sobie

4:50wbić do głowy i teraz jeśli chcę żeby moje hero jpg zaczęło z powrotem

4:54działać to muszę prostu wpisać tutaj photos i teraz po odświeżeniu naszej strony zauważ że

4:59obrazek wrócił na swoje miejsce więc w ten sposób możemy zarządzać assetami

5:03jeśli chcemy żeby one wylądował w jakimś konkretnym miejscu to może być związane z

5:07jakimiś ikonami z rzeczami które nie chcemy żeby były przetwarzane właśnie przez graphql w gatsby

5:11natomiast nie jest to rekomendowana droga i warto jednak wyposażyć

5:16się w te narzędzia nowoczesne czyli właśnie w to jak gatsby poprzez

5:20graphql obsługuje zdjęcia dlaczego o tym opowiem ci w następnych

5:24lekcjach natomiast teraz tylko spróbujmy podmienić to src na src

5:28właśnie zaczytane przez graphql jak to zrobić najlepiej

5:33jak zaczniemy sobie od localhost slash graphql

5:37przed slashem pamiętaj że jest jeszcze trzy podkreślniki

5:41są podkreślnik podkreślnik podkreślnik graphql wtedy wchodzimy do

5:45graphql możemy sobie dodać nowe query i

5:50to co my chcemy osiągnąć to znaleźć plik więc

5:54zakładam że będzie to file możemy jego

6:00nazwę podać i tak jak pamiętasz możemy wpisać

6:05tutaj name dwukropek klamry eq

6:09dwukropek hero a

6:15to czego szukamy nazywa się w public url więc tak wygląda

6:19query które musimy wpisać do naszego projektu public

6:24url po prostu odnosi się do tego pliku który został przeniesiony przez gatsby do

6:28folderu static ale już wewnątrz folderu public dlatego nazywa

6:34się public url więc teraz chcemy użyć sobie

6:38tego query wewnątrz naszego komponentu i zapytasz jak to zrobić

6:42jak to napisać moglibyśmy to napisać z łapy ale moim zdaniem graphql

6:47jest na tyle fajnym narzędziem że możemy to również wykorzystać właśnie do tego żeby

6:51nauczyć się pisać takie query w graphql wewnątrz komponentów gatsby

6:55po prostu kliknę tutaj code exporter i zauważ że

6:59mamy tutaj przykładowy komponent który możemy sobie skopiować do

7:04naszej strony i dopasować to co mamy do tego czego

7:08nie mamy nie mamy na pewno tego query graphql więc możemy sobie to przekopiować

7:13tutaj ponad nasz export default importów

7:17nie musimy ściągać jedynie ten graphql z

7:21gatsby musimy sobie wyciągnąć tutaj mieliśmy wcześniej link możemy to po prostu na

7:25razie podmienić bo linka na razie tutaj żadnego nie ma to

7:31co jest bardzo ważne to tutaj data jest przekazywana jako props

7:35automatycznie do naszego komponentu za chwilkę to jeszcze omówię ten eksport możemy

7:40sobie wywalić więc tak naprawdę skopiowaliśmy sobie graphql zaimportowany

7:44z gatsby oraz to query które było na dole naszego komponentu zauważ

7:49że to query zawiera dokładnie to samo co napisaliśmy wewnątrz naszego graphql w

7:53tym miejscu to jest właśnie fajny ten code exporter jeśli mamy na przykład jakieś trochę

7:57dłuższe query to fajnie żeby po prostu sobie to skopiować będzie nam

8:02wtedy łatwiej okej a teraz wróćmy już do naszego komponentu i przyjrzyjmy

8:06się co tutaj się wydarzyło bo to jest naprawdę bardzo ważne i to jest jedna z takich właśnie magicznych

8:10rzeczy w gatsby które trzeba zrozumieć nie jest to trudne po prostu trzeba to ogarnąć

8:14umysłem uwaga tłumaczę więc mamy folder pages i

8:18wewnątrz folderu pages możemy pisać query które wygląda właśnie w taki sposób

8:22że jest eksportowane wewnątrz jakiegoś consta ten

8:26const może nazywać się jak chcemy i tutaj absolutnie nie ma to żadnego znaczenia

8:30na tym etapie ponieważ nigdzie tego const nie wykorzystamy

8:35i to jest właśnie ciekawe ten const jest eksportowany

8:39następnie gatsby sobie go ogarnia tam na zapleczu zamiast nas on

8:43wykorzystuje graphql zaimportowany z gatsby który po prostu przyjmuje tutaj stringa

8:47podobnie trochę to wygląda jak styled components tylko

8:52że zamiast css tutaj piszemy query graphql dokładnie takie samo jak

8:56piszemy w graphql kiedy sprawdzamy sobie co dane query

9:01wyrzuci i teraz żeby to query zadziałało to musimy podać

9:05propsa do naszego komponentu i to co ci teraz pokazuje działa tylko

9:09i wyłącznie jeśli używamy komponentu wewnątrz folderu pages wszystkie

9:14komponenty poza folderem pages używają trochę innego sposobu na

9:18właśnie pisanie query w graphql o tym opowiem ci troszkę później więc

9:22pierwszy warunek to taki wyeksportowany const o dowolnej nazwie

9:26który wykorzystuje graphql a drugi warunek który musimy spełnić

9:31żeby nasza operacja się powiodła to przekazanie propsów do naszego komponentu

9:35i teraz możemy podać po prostu props i zacznijmy chyba od tego żeby pokazać

9:39ci co się w tym momencie dzieje wyplujemy sobie te

9:43propsy w console logu po prostu w dowolnym miejscu w naszym komponencie akurat wrzucam tutaj

9:47bo wiadomo że wtedy on zadziała odświeżam

9:53i zauważ co my tutaj mamy mamy różne

9:57rzeczy podawane przez różne komponenty różne funkcje różne metody w gatsby

10:01do naszego komponentu mamy na przykład nawigację która jest przez

10:05reach routem dodawana automatycznie namy location podobnie jest tutaj

10:10ale mamy też taki obiekt jak data i ten

10:14data jest właśnie przekazywany przez to query udowodnię ci to

10:18wywalę teraz to wyeksportowane graphql query odświeżę

10:24nasz komponent i zauważ że data już nie jest tutaj obecne mimo

10:30że proxy są przekazywane więc tylko i wyłącznie w momencie kiedy eksportowany

10:35jest jakiś graphql query z naszego komponentu nawet specjalnie zmieniłem

10:39tutaj nazwę na kangur żeby ci pokazać że to może być cokolwiek wrócę

10:43do query bo jest ładniejszą nazwą jeśli eksportujemy consta

10:47query wykorzystującego graphql w naszym

10:51komponencie wewnątrz folderu pages to po przekazaniu propsów pojawi się

10:55tutaj obiekt data i to jest zasada którą trzeba po prostu zapamiętać i

10:59z niej korzystać więc teraz jeśli chcemy wyciągnąc sobie to data

11:04jak zwał tak zwał data spokój jak to mówią

11:08gdzieniegdzie w polsce wykonsologujemy sobie teraz data i

11:13zobaczymy że mamy tutaj file a file zawiera

11:17public url więc teraz to co możemy zrobić to

11:23podać tutaj w src już nie w stringu tylko w klamrach data

11:28file public url zapisujemy

11:33to i zauważ że nasze zdjęcie działa i gratuluję ci

11:39serdecznie właśnie napisaliśmy pierwsze graphql query w naszym gatsby

11:43które przekazuje automatycznie dane do naszego komponentu

11:47wewnątrz folderu pages i następnie te dane możemy wykorzystywać właśnie

11:52na przykład w obrazkach w tym momencie może ci się to wydawać jakimś totalnym

11:56overkillem żeby w ten sposób pisać query graphql żeby tylko

12:00jakiś głupi obrazek wczytać do naszego komputera ale uważaj co

12:05się wydarzy w następnej lekcji bo to jest naprawdę mega mega ciekawe