Graphql - wprowadzenie by Qziem · Pull Request #60 · Qziem/eloapp

Qziem · 2019-04-09T16:47:13Z

Zrobiłem endpoint api graphqlowego pod adresem .../api/graphql
Jest tam narazie tylko jeden węzeł: users - służy do pobierania userów do rankingu.
Po stronie fe przerobiłem właśnie pobieranie ludzików do rankingu aby korzystać z tego węzła (zamiast z restowego: /users. Restowego serwisu nie usunąłem bo Stats z niego korzysta - oczywiście tam też będzie można przerobić aby korzystało z graphqlowego węzła - ale to może w następnych kejsach).

To jest narazie pierwszy krok - w którym tylko pobieram dane. W innych kejsach w miarę przerabiania aplikacji trzeba będzie ogarnąć głównie dwie rzeczy:

walidację, - czyli żeby be generował odpowiednie błędy i aby fe je odpowiednio obsługiwał
mutacje - czyli zapis w bazie, czyli np. update punków po wpisaniu wyniku

Qziem · 2019-04-09T16:48:33Z

fe/src/utils/GraphQL/ClientNoComponent.re

@@ -0,0 +1,19 @@
+open Js.Promise;
+
+module Make = (Config: ReasonApolloTypes.Config) => {


Ten moduł w końcu mi się nie przydał - służy do puszczania requestów graphqlowych bez używania komponentu.
Ale może się w przyszłości okazać przydatny dlatego go narazie nie skasowałem

"bez używania komponentu"? Co to dokładnie oznacza i jaka jest różnica pomiędzy jednym a drugim?
Mimo wszystko trzeba też się głębiej zastanowić, czy w przyszłości się z tego pliku na pewno skorzysta. Bo tak minie parę miesięcy, a ten plik nadal nie zostanie użyty :P.

Reaon-apollo dostarcza komponent który na zamontowanie sam pobiera dane. Później można wymusić na nim refetch - zorobiłem wyżej za pomocą tego refetchUsersList - i w zasadzie tyle on potrafi. A czasem mogą być sytuacje że można trzeba jakoś bardziej customowo pobierać dane - np. nie na zamontowanie ale na jakąś akcję. Albo, jeśli chcielibyśmy trzymać dane w stanie komponentu, to wtedy właśnie można użyć tego. To pozwala ręcznie strzelać do be i to coś zwraca promisę. Narazie bym zostawił do momentu zakończenia przepisywania na gql, jeśli po tym będzie niepotrzebny to będzei można wywalić

Qziem · 2019-04-09T16:53:40Z

Oczywiście domergowanie tego oznacza że teraz czeka nas znowu krucjata przerabiająca cały BE - oczywiście nie muszę ja wszystkiego robić jeśli chcecie poznać graphqla. Ale jeśli nie ma zapału i chęci na graphqla (mi się pewnie samemu całości nie będzie chciało przerabiać) nie muszę tego mergować i możeby pozostać przy REST. Jak chceta !

jazithedev · 2019-04-09T17:00:06Z

Ja tam jak najbardziej mogę się wkręcić, bo potrzebuję dowiedzieć się o wiele więcej o GraphQL. Nie mniej, może to trochę potrwać :/.
BTW. "Na razie" pisze się osobno :P.

jazithedev · 2019-04-14T12:55:50Z

Restowego serwisu nie usunąłem bo Stats z niego korzysta - oczywiście tam też będzie można przerobić aby korzystało z graphqlowego węzła - ale to może w następnych kejsach

To według mnie można dodać adnotację @deprecated do tego serwisu REST.

jazithedev · 2019-04-14T12:01:45Z

be/Controller/GraphQLCtrl.php

+use GraphQLElo\Resolvers\UsersResolver;
+use GraphQLElo\Types\UserType;
+
+class GraphQLCtrl {


Nie stosuje się (raczej) dwóch dużych liter obok siebie w środku nazwy klasy. Zmniejsza czytelność. Może po prostu GqlCtrl?

zmieniłem na GraphqlCtrl

jazithedev · 2019-04-14T12:10:48Z

be/Controller/GraphQLCtrl.php

+        $rawInput = $request->getBody();
+        $input = json_decode($rawInput, true);
+        $query = $input['query'];
+        $variableValues = isset($input['variables']) ? $input['variables'] : null;


Tutaj można zmienić tą linijkę na:

$variableValues = $input['variables'] ?? null;

jazithedev · 2019-04-14T12:11:25Z

be/Controller/GraphQLCtrl.php

+        return $response->withJson($output);
+    }
+
+    private function getQueryFields() {


Uzupełnić typowanie :array

jazithedev · 2019-04-14T12:30:56Z

be/GraphQLElo/Resolvers/UsersResolver.php

+use Model\Entity\User;
+use Model\Repository\UserRepository;
+
+class UsersResolver {


Zakładam, że resolvery służą do przetworzenia parametrów Requesta i na ich podstawie zwrócenia odpowiednich danych? Czy tutaj w jakiś sposób czasem te parametry nie powinny być przekazywane? Chodzi mi o to, że np. czy kod ['rating' => 'DESC', 'code' => 'ASC'] nie powinien czasem być jakoś przekazywany jako parametr mówiący o tym według czego ma być sortowanie?

Tak, możnaby zrobić jakiś input typ który by tym sterował i wtedy możnaby tym sterować z FE, ale narazie to jest wprowadzenie graphqlea - narazie bym zostawł w przyszłości jak będzie potrzeba będzie można to oczywiście zmienić

jazithedev · 2019-04-14T12:31:38Z

be/GraphQLElo/Types/UserType.php

+            'fields' => [
+                'userNid' => [
+                    'type' => Type::nonNull(Type::int()),
+                    'resolve' => function (User $user) {


Tego dowiedziałem się od nowego PhpStorma. Jak zrobić static function zamiast samego function, to będzie to bardziej optymalne :).

jazithedev · 2019-04-14T13:24:30Z

fe/src/utils/GraphQL/Client.re

@@ -0,0 +1,6 @@
+let inMemoryCache = ApolloInMemoryCache.createInMemoryCache();


Czy nie powinniśmy nazwać tego pliku jakoś inaczej? Np. GqlClient, albo ApiClient (lub podobne)? W przyszłości, jak dojdzie jakikolwiek inny "Client", to będzie problem.

Zmieniłem na ApiClient

jazithedev · 2019-04-14T13:28:00Z

fe/src/components/RankAndStats/RankAndStats.re

-      }
-    </div>,
+      <GetUsersQuery
+        notifyOnNetworkStatusChange=true variables=usersQuery##variables>


variables=usersQuery##variables
Cóż to za konstrukcja?

notifyOnNetworkStatusChange
Cóż to za parametr?

variables=usersQuery##variables -
Jeśli chodzi Ci o pytanie co to jest ## to to jest poprostu pobranie elementu z obiektu. usersQuery to obiekt Js.t i z niego pobiera się parametry właśnie w taki sposób.
A ogólnie to jest to przekazanie parametrów do zapytania graphqlowego. To wziąłem dokładnie z dokumentacji reason-apollo: https://github.com/apollographql/reason-apollo

notifyOnNetworkStatusChange to już jest mniej oczywiste. Generalnie ten komponent zwraca dane i domyślnie obsługuje tylko pokazanie loading gdy pobiera dane za pierwszym razem. Dzięki temu parametrowi, przy obieraniu danych mamy parametr networkStatus z którego można wyciągnąć czy dane pobierane są ponownie - żeby pokazać loading.

jazithedev · 2019-04-14T14:21:28Z

fe/src/components/GameResult/GameResult.re

  ResponseDecoder.MakeWithWarningsOrContent(GameResponseContentDecoder);

-let onSuccess = (containterSend, send, json) => {
+let onSuccess = (refreshUsers, send, json) => {


Nazwa dla tego na pewno lepsza, ale jakoś "refresh" mi tu też nie pasuje :D. Ja bym przerobił na "reloadUsersList".

W sumie spoko, zmieniłem

jazithedev · 2019-04-14T14:22:03Z

fe/src/components/RankAndStats/RankAndStats.re

+        ...{
+             ({result, refetch, networkStatus}) => {
+               let refreshUsers = refreshUsersWithRefetch(refetch);
+               let isRefeching = networkStatus == Some(4);


Trzeba by wyjaśnić nieco co oznacza Some(4).

To się właśnie wiąże troche z powyższym pytaniem. Akurat Some(4) oznacza że dane pobierają się ponownie - tak mają w dokumentacji react-apollo. Wyniosłem to do stałej
Niewiem czy to co pisałem wyżej i tutaj jest zrozumiałe jak coś mogę potłumaczyć na żywo.

jazithedev · 2019-04-14T14:24:41Z

fe/src/components/RankAndStats/RankAndStats.re


-let onSuccess = (send, json) =>
-  json |> DecodeUsers.users |> (users => send(SetUsersToState(users)));
+let refreshUsersWithRefetch = (refetch, ()) => refetch(None)->ignore;


Wyjaśnisz mi, proszę, co oznacza refetch(None)->ignore ?

refetch to funkcja dostarczona przez reason-apollo która ponownie wysyła request o pobranie danych.
Ona właśnie powoduje że wysyła się request i wtedy ten komponent wygenerowany z reason-apollo (GetUsersQuery) sam się odświży - i to chce osiągnąć. Ale ta funkcja dodaktowo zwraca promise, jeśli ktoś chciałby potem coś jeszcze robić. Ja nie chce i po to jest ten ignore - bo funkcja refreshUsersWithRefetch powinna zwrócić unita, a bez użycia ignore by zwróciła promise. Czyli w skrócie ignore to funkcja która bierze coś tam i zwraca unita.

Qziem · 2019-06-23T09:49:33Z

be/Controller/GraphQLCtrl.php

+use GraphQLElo\Resolvers\UsersResolver;
+use GraphQLElo\Types\UserType;
+
+class GraphQLCtrl {


zmieniłem na GraphqlCtrl

Qziem · 2019-06-23T09:50:23Z

be/Controller/GraphQLCtrl.php

+        $rawInput = $request->getBody();
+        $input = json_decode($rawInput, true);
+        $query = $input['query'];
+        $variableValues = isset($input['variables']) ? $input['variables'] : null;


Qziem · 2019-06-23T09:50:52Z

be/Controller/GraphQLCtrl.php

+        return $response->withJson($output);
+    }
+
+    private function getQueryFields() {


Qziem · 2019-06-23T09:52:27Z

be/GraphQLElo/Resolvers/UsersResolver.php

+use Model\Entity\User;
+use Model\Repository\UserRepository;
+
+class UsersResolver {


Tak, możnaby zrobić jakiś input typ który by tym sterował i wtedy możnaby tym sterować z FE, ale narazie to jest wprowadzenie graphqlea - narazie bym zostawł w przyszłości jak będzie potrzeba będzie można to oczywiście zmienić

Qziem · 2019-06-23T09:53:22Z

be/GraphQLElo/Types/UserType.php

+            'fields' => [
+                'userNid' => [
+                    'type' => Type::nonNull(Type::int()),
+                    'resolve' => function (User $user) {


Qziem · 2019-06-23T10:06:00Z

fe/src/components/RankAndStats/RankAndStats.re

+let component = ReasonReact.statelessComponent("RankAndStats");

-let component = ReasonReact.reducerComponent("RankAndStats");
+module GetUsers = [%graphql


Nawiązując do pytania o ppx - to właśnie tutaj to jest użyte - dzięki tamtemu w bsconfig można tutaj zrobić takie zapytanie graphqlowe o takiej składni

Qziem · 2019-06-23T10:09:41Z

fe/src/components/RankAndStats/RankAndStats.re

-      }
-    </div>,
+      <GetUsersQuery
+        notifyOnNetworkStatusChange=true variables=usersQuery##variables>


variables=usersQuery##variables -
Jeśli chodzi Ci o pytanie co to jest ## to to jest poprostu pobranie elementu z obiektu. usersQuery to obiekt Js.t i z niego pobiera się parametry właśnie w taki sposób.
A ogólnie to jest to przekazanie parametrów do zapytania graphqlowego. To wziąłem dokładnie z dokumentacji reason-apollo: https://github.com/apollographql/reason-apollo

notifyOnNetworkStatusChange to już jest mniej oczywiste. Generalnie ten komponent zwraca dane i domyślnie obsługuje tylko pokazanie loading gdy pobiera dane za pierwszym razem. Dzięki temu parametrowi, przy obieraniu danych mamy parametr networkStatus z którego można wyciągnąć czy dane pobierane są ponownie - żeby pokazać loading.

Qziem · 2019-06-23T10:10:53Z

fe/src/components/RankAndStats/RankAndStats.re

+        ...{
+             ({result, refetch, networkStatus}) => {
+               let refreshUsers = refreshUsersWithRefetch(refetch);
+               let isRefeching = networkStatus == Some(4);


To się właśnie wiąże troche z powyższym pytaniem. Akurat Some(4) oznacza że dane pobierają się ponownie - tak mają w dokumentacji react-apollo. Wyniosłem to do stałej
Niewiem czy to co pisałem wyżej i tutaj jest zrozumiałe jak coś mogę potłumaczyć na żywo.

Qziem · 2019-06-23T10:15:56Z

fe/src/utils/GraphQL/Client.re

@@ -0,0 +1,6 @@
+let inMemoryCache = ApolloInMemoryCache.createInMemoryCache();


Zmieniłem na ApiClient

Qziem · 2019-06-23T10:19:09Z

fe/src/utils/GraphQL/ClientNoComponent.re

@@ -0,0 +1,19 @@
+open Js.Promise;
+
+module Make = (Config: ReasonApolloTypes.Config) => {


Reaon-apollo dostarcza komponent który na zamontowanie sam pobiera dane. Później można wymusić na nim refetch - zorobiłem wyżej za pomocą tego refetchUsersList - i w zasadzie tyle on potrafi. A czasem mogą być sytuacje że można trzeba jakoś bardziej customowo pobierać dane - np. nie na zamontowanie ale na jakąś akcję. Albo, jeśli chcielibyśmy trzymać dane w stanie komponentu, to wtedy właśnie można użyć tego. To pozwala ręcznie strzelać do be i to coś zwraca promisę. Narazie bym zostawił do momentu zakończenia przepisywania na gql, jeśli po tym będzie niepotrzebny to będzei można wywalić

Qziem added 12 commits March 24, 2019 14:02

Pierwsze testowe api graphql!

696fe90

Stworzenie węzła users

f82a070

Popraweczki

80f6fc3

Strzały graphqlowe z fe

ff2aaf0

Wydzielenie części wspólnej tworzenia klienta bez komponentu

3b9081e

Merge branch 'master' into graphql

f9cc92c

Update yarn.lock

71644ea

Merge branch 'master' into graphql

b6920de

Przerobienie na komponent Query

9adc01a

Przerobienie komponentu ta stateless

e7c5699

Obliczanie trend w jego resolverze

cf74e36

Zmiana nazwy na UserType

8451f44

Qziem commented Apr 9, 2019

View reviewed changes

jazithedev requested changes Apr 14, 2019

View reviewed changes

Merge branch 'master' into graphql + poprawki cr

dcc3ac8

Qziem commented Jun 23, 2019

View reviewed changes

Merge branch 'master' into graphql

2779f8d

		@@ -0,0 +1,19 @@
		open Js.Promise;

		module Make = (Config: ReasonApolloTypes.Config) => {

		@@ -0,0 +1,6 @@
		let inMemoryCache = ApolloInMemoryCache.createInMemoryCache();

Conversation

Qziem commented Apr 9, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Qziem commented Apr 9, 2019

Uh oh!

jazithedev commented Apr 9, 2019

Uh oh!

jazithedev commented Apr 14, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone