This repository has been archived by the owner on Nov 20, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #128 from idkjs/master
add Fragments example and Readme notes
- Loading branch information
Showing
7 changed files
with
955 additions
and
486 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| open Fragments; | ||
| open ApolloHooks; | ||
|
|
||
| module PersonsOlderThanQuery = [%graphql | ||
| {| | ||
| query getPersonsOlderThan($age: Int!) { | ||
| allPersons(filter: { age_gte: $age } ) { | ||
| ...PersonFragment.Person | ||
| } | ||
| } | ||
| |} | ||
| ]; | ||
|
|
||
| [@react.component] | ||
| let make = (~age) => { | ||
| let (simple, _full) = | ||
| useQuery( | ||
| ~variables=PersonsOlderThanQuery.makeVariables(~age, ()), | ||
| PersonsOlderThanQuery.definition, | ||
| ); | ||
|
|
||
| <div> | ||
| {switch (simple) { | ||
| | Loading => <p> {React.string("Loading...")} </p> | ||
| | Data(data) => | ||
| <h3> | ||
| {"There are " | ||
| ++ (data##allPersons->Belt.Array.length |> string_of_int) | ||
| ++ " people older than " | ||
| ++ string_of_int(age) | ||
| |> React.string} | ||
| </h3> | ||
| | NoData | ||
| | Error(_) => <p> {React.string("Error")} </p> | ||
| }} | ||
| </div>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| // example of creating a fragment on a type available from your grapqlql-ppx types. | ||
|
|
||
| // In this contrived example, here instead of using the following as seen in the `FilterByAge.re` | ||
| // module PersonsOlderThanQuery = [%graphql | ||
| // {| | ||
| // query getPersonsOlderThan($age: Int!) { | ||
| // allPersons(filter: { age_gte: $age } ) { | ||
| // id | ||
| // } | ||
| // } | ||
| // |} | ||
| // ]; | ||
|
|
||
| // we can use the following as seen in `FilterByAgeFragment.re` | ||
| // ``` | ||
| // module PersonsOlderThanQuery = [%graphql | ||
| // {| | ||
| // query getPersonsOlderThan($age: Int!) { | ||
| // allPersons(filter: { age_gte: $age } ) { | ||
| // ...PersonFragment.Person | ||
| // } | ||
| // } | ||
| // |} | ||
| // ]; | ||
| // ``` | ||
| module PersonFragment = [%graphql | ||
| {| | ||
| fragment person on Person { | ||
| id | ||
| name | ||
| age | ||
| } | ||
| |} | ||
| ]; | ||
| module PersonIdFragment = [%graphql | ||
| {| | ||
| fragment person on Person { | ||
| id | ||
| } | ||
| |} | ||
| ]; | ||
| module PersonAgeFragment = [%graphql | ||
| {| | ||
| fragment person on Person { | ||
| age | ||
| } | ||
| |} | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| module GetAllPersonsQuery = [%graphql | ||
| {| | ||
| query getAllPersons($skip: Int!, $first: Int!) { | ||
| allPersons(skip: $skip, first: $first) { | ||
| ...Fragments.PersonFragment.Person | ||
| } | ||
| } | ||
| |} | ||
| ]; | ||
|
|
||
| let personsPerPage = 5; | ||
|
|
||
| [@react.component] | ||
| let make = () => { | ||
| let (_simple, full) = | ||
| ApolloHooks.useQuery( | ||
| ~variables= | ||
| GetAllPersonsQuery.makeVariables(~skip=0, ~first=personsPerPage, ()), | ||
| ~notifyOnNetworkStatusChange=true, | ||
| GetAllPersonsQuery.definition, | ||
| ); | ||
|
|
||
| let handleLoadMore = _ => { | ||
| let skip = | ||
| switch (full) { | ||
| | {data: Some(data)} => data##allPersons->Belt.Array.length | ||
| | _ => 0 | ||
| }; | ||
|
|
||
| full.fetchMore( | ||
| ~variables= | ||
| GetAllPersonsQuery.makeVariables(~skip, ~first=personsPerPage, ()), | ||
| ~updateQuery=[%bs.raw | ||
| {| | ||
| function(prevResult, { fetchMoreResult, ...rest }) { | ||
| if (!fetchMoreResult) return prevResult; | ||
| return { | ||
| ...fetchMoreResult, | ||
| allPersons: prevResult.allPersons.concat(fetchMoreResult.allPersons) | ||
| }; | ||
| } | ||
| |} | ||
| ], | ||
| (), | ||
| ) | ||
| |> ignore; | ||
| }; | ||
|
|
||
| <div className="person-list"> | ||
| {switch (full) { | ||
| | {loading: true, data: None} => <p> {React.string("Loading...")} </p> | ||
| | {data: Some(data)} => | ||
| <> | ||
| <Persons persons={data##allPersons} /> | ||
| <button | ||
| onClick=handleLoadMore disabled={full.networkStatus === FetchMore}> | ||
| {React.string("Load more")} | ||
| </button> | ||
| </> | ||
| | {error: Some(_)} => <p> {React.string("Error")} </p> | ||
| | {error: None, data: None, loading: false} => | ||
| <p> {React.string("Not asked")} </p> | ||
| }} | ||
| </div>; | ||
| }; |
Oops, something went wrong.