Miesiąc: lipiec 2020

GraphQL w React #1 – poznaj podstawy GraphQL!

Spis treści

  1. Wprowadzenie
  2. Podstawy GraphQL
    1. Schema
      1. Scalar types
      2. Object types
      3. Input types
      4. Root types
    2. Resolvers
  3. Uruchomienie serwera GraphQL
    1. Instalacja i implementacja
      1. Instalacja serwera Apollo
      2. Uruchomienie serwera Apollo
    2. Pełny kod aplikacji
    3. Kod w repozytorium Github
    4. Queries – wysyłanie żądań na serwer
      1. Kod w repozytorium Github
  4. Podsumowanie

Wprowadzenie

Popularność GraphQL rośnie z dnia na dzień – warto więc być zorientowanym w temacie, zważywszy że jego stosowanie ma wiele zalet:

  • jasno zdefiniowane API dzięki schematom
  • pobieranie tylko potrzebnych danych – brak zjawiska nadmiarowych danych
  • Brak konieczności poprawek backendowych, jeżeli zmienią się potrzebne w danym widoku dane (w rozsądnych ramach oczywiście)
  • duża popularność, GraphQL jest stosowany między innymi przez takie firmy Github, Starbucks czy Twitter.

Warto więc poznać podstawy GraphQL.

Czytaj dalej „GraphQL w React #1 – poznaj podstawy GraphQL!”

Poznaj bibliotekę Yup, która pomoże Ci z walidacją formularzy

Spis treści

  1. Wprowadzenie
  2. Zastosowanie biblioteki
    1. Prosta walidacja true / false
    2. Walidacja ze zwrotką zawierającą błędy
    3. Własne teksty dla błędów walidacji
  3. Zastosowanie Yup w React
    1. Czysty React bez bibliotek
      1. Pełny kod
      2. Kod na github
    2. Wsparcie w bibliotekach do obsługi formularzy w React
  4. Podsumowanie

Wprowadzenie

Choć od dawna HTML5 udostępnia nam możliwość walidowania formularzy za pomocą atrybutów na polach takich jak required, min, max, minlength czy maxlength, to rozwiązanie rzadko kiedy jest wystarczające. Nie mamy chociażby możliwości stylowania popupu informującego o błędzie walidacji, nie możemy zmienić też tekstu błędu. Dodatkowo, wygląda on różnie w różnych przeglądarkach.

Co prawda, CSS dostarcza pseudoklasy związane z walidacją, opisane np tutaj: Styling Form Inputs in CSS With :required, :optional, :valid and invalid i na ich podstawie, budując skomplikowane selektory możnaby kolorować pola, wyświetlać użytkownikowi błędy itd jednak nadal potrzebujemy walidacji w JS choćby wtedy, gdy chcemy sprawdzić coś niestandardowego jak UUID.

Biblioteka Yup służy do budowania schematów walidacji obiektów oraz parsowania jednych obiektów na drugie. Choć naturalnym miejscem jej użycia są walidacje formularzy, nie jest do tego ograniczona – walidować i parsować można np dane z API backendowego, ponieważ Yup waliduje bezpośrednio obiekt z danymi, nie ma powiązania z np DOMem.

Czytaj dalej „Poznaj bibliotekę Yup, która pomoże Ci z walidacją formularzy”

Biblioteki do formularzy w React #4 – Final Form

Ten post jest ostatnim artykułem w serii o obsłudze formularzy w React:

Biblioteki do formularzy w React #1 – sprawdź wprowadzenie do 3 najpopularniejszych bibliotek
Biblioteki do formularzy w React #2 – react-hook-form
Biblioteki do formularzy w React #3 – formik

Spis Treści

  1. Wprowadzenie
  2. Przykład prosty
    1. Walidacja
      1. Walidacja prosta
      2. Walidacja asynchroniczna
    2. Pełny kod przykładu prostego
    3. Repozytorium przykładu prostego na Github
  3. Przykład zaawansowany
    1. Problemy wersji 6.4.0 z walidacją asynchroniczną
    2. CSS GRID
    3. Dodawanie zdjęć do galerii za pomocą customowego komponentu
    4. Walidacja rozmiarów obrazka
    5. Pełny kod przykładu zaawansowanego
    6. Repozytorium przykładu zaawansowanego na Github
  4. Podsumowanie

Wprowadzenie

Biblioteka Final Form jest biblioteką bazującą na modelu subskrypcyjnym, pozwalającą subskrybować zmiany wartości, walidacji czy aktywności danego pola. Biblioteka nie jest związana z żadnych konkretnym frameworkiem, natomiast posiada wrapper dla Reacta – React Final Form i to on omówiony zostanie w tym artykule.

Dlaczego powinno zależeć Ci na poznaniu biblioteki Final Form? Ponieważ znacząco ułatwia takie rzeczy jak:

  • przekazywanie danych z i do formularza
  • skomplikowane, customowe walidacje
  • walidacja asynchroniczna
  • zarządzanie stanem formularza (by np pokazywać użytkownikowi których pól jeszcze nie “dotknął”)
  • podpinanie customowych komponentów do zautomatyzowanej logiki biblioteki
Czytaj dalej „Biblioteki do formularzy w React #4 – Final Form”