GraphQL を Relay と Phoenix で実装する

Transcript

1. (SBQI2-
   Λ
   3FMBZ
   ͱ
   1IPFOJY
   Ͱ࣮૷͢Δ :BT
   0LBEB
2. ܦྺ w ࢓ࣄͱͯ͠ͷϓϩάϥϚʔྺɿ̍̕೥͙Β͍
   w ݱࡏɺϑϦʔΤϯδχΞ
   w σεΫτοϓ༻ΞϓϦɿ̍̌೥͙Β͍
   w "OESPJE༻ΞϓϦɿ̑೥͙Β͍
   w ͱ͖Ͳ͖
   J04
   
   8FC
   
   4FSWFS
   ͷ͓ख఻͍
3. ݱࡏ w ೥݄͔ΒΞΧπΩͷ৽نࣄۀ෦
   w 8FC
   αʔϏεͷ։ൃ
   w αʔόɿ&MJYJS
   
   1IPFOJY
   w ϑϩϯτɿ3FBDU
   
   3FEVY
   w Α͏΍͘ɺHVMQ
   &4
   
   
   BOTJCMFɺɾɾɾͳͲ Ͱ࿩ʹೖΕΔΑ͏ʹͳ͖ͬͯͨ
4. (SBQI2-
5. 8FC
   "1*
   ͷελΠϧ 3&45
   w ϦιʔεΛ
   63*
   Ͱද͠ɺ
   w (&5
   
   1045
   
   165
   
   %&-&5&
   Ͱૢ࡞͢Δ
   w (&5
   VTFST
   
   
   ϢʔβϦετऔಘ
   w (&5
   VTFST
   
   Ϣʔβ
   
   औಘ
   w 165
   VTFST
   
   Ϣʔβ
   
   ߋ৽
6. 8FC
   "1*
   ͷελΠϧ ΦʔέετϨʔγϣϯ૚
   w ΫϥΠΞϯτͷ͋Δը໘ʹಛԽͨ͠
   "1*
   w ྫ͑͹ɺ
   "1*
   
   ը໘
   w (&5
   WJFXUPQ
   
   
   هࣄͷϦετɺϢʔβεςʔλεɺఱؾ
   ʜ
7. "1*
   ͷελΠϧ 3&45 ΦʔέετϨʔγϣϯ૚ %#ΞΫηε
   
   "1* ˓গͳ͍ɾγϯϓϧ ☓ଟ͍ɾෳࡶ ൚༻ੑ ˓ ☓ "1*
   ਺ ˓গͳ͍ ☓ଟ͍ "1*਺
   
   ը໘ ☓ଟ͍ ˓গͳ͍ ΫϥΠΞϯτ ͝ͱͷ࠷దԽ ☓ ˓
8. ཧ૝ͷ"1*
   w αʔόͷ࡞Γ͕γϯϓϧͰ
   w ൚༻తͰ
   w "1*
   ਺͕࠷খݶͰ
   w ΫϥΠΞϯτ͔Βͷ௨৴͕গͳ͘
   w σόΠε΍ը໘ͳͲͷ༻్͝ͱʹ࠷దԽͰ͖Δ
9. (SBQI2- w 'BDFCPPL͕։ൃ
   w ΫΤϦʔܕͷ
   "1*
   w ̎ͭͷૢ࡞
   w RVFSZ
   ͱ
   NVUBUJPO query Q { viewer { totalCount todos(first:3) { edges { node { id text } } } } }
10. (SBQI2- w αʔόͰ
    
    TDIFNB
    Λఆٛ
    w TDIFNB
    
    ϦιʔεͷܕͳͲ
    w ΫϥΠΞϯτ͸औಘ͢ΔϦιʔεɺϦιʔεͷ਺ɺ ϑΟʔϧυΛࣗ༝ʹ૊ΈཱͯΔ͜ͱ͕Ͱ͖Δɻ
11. %&.0
12. 3FMBZ
13. 3FMBZ w (SBQI2-
    ͷػೳΛ
    3FBDU
    ʹ௥Ճ͢Δ
    +BWB4DSJQU
    ͷϥΠϒϥϦ
14. 3FBDU w 8FC
    ͷ
    7JFX
    ͷͨΊͷ
    +BWB4DSJQU
    ϥΠϒϥϦ
    w 7JSUVBM
    %0.
    w ίϯϙʔωϯτࢦ޲
    w TUBUF
    w มߋ͢Δͱؔ࿈͢Δίϯϙʔωϯτ͕ߋ৽͞ΕΔ
    w QSPQT
    w JNNVUBCMF
    
    ਌͔Βࢠ΁σʔλΛ౉͢
15. 3FBDU class Comment extends React.Component {
 render() {
 return (
 <div className="comment">
 <h2 className="commentAuthor">
 {this.props.comment.author}
 </h2>
 {this.props.comment.text}
 </div>
 );
 }
 }
 
 class CommentList extends React.Component {
 : 
 componentDidMount() {
 $.ajax({
 success: function(data) {
 this.setState({comments: data});
 }.bind(this),
 });
 }
 
 render() {
 let commentNodes = this.state.comments.map(comment => {
 return (
 <Comment comment={comment} key={comment.id} />
 );
 });
 
 return (
 <div className="commentList">
 {commentNodes}
 </div>
 );
 }
 }
16. 3FMBZ w 3FBDU
    ʹ
    (SBQI2-
    ͷػೳΛ௥Ճ͢ΔϥΠϒϥϦ
    w (SBQI2-
    ʹΑΔσʔλͷऔಘɾߋ৽
    w QSPQT
    ΁ͷ൓ө
    w TUBUF
    ͸
    3FMBZ
    ͕؅ཧ
17. 3FMBZ 5PEP-JTU 
 export default Relay.createContainer(TodoList, {
 
 fragments: {
 viewer: () => Relay.QL`
 fragment on User {
 completedCount,
 todos(status: $status, first: $limit) {
 edges {
 node {
 id,
 ${Todo.getFragment('todo')},
 },
 },
 },
 }
 `,
 },
 });
 class TodoList extends React.Component {
 renderTodos() {
 return this.props.viewer.todos.edges.map(edge =>
 <Todo
 key={edge.node.id}
 todo={edge.node}
 viewer={this.props.viewer}
 />
 );
 }
 render() {
 return (
 <section className="main">
 <ul className="todo-list">
 {this.renderTodos()}
 </ul>
 </section>
 );
 }
 }

18. 3FMBZ export default Relay.createContainer(Todo, {
 fragments: {
 todo: () => Relay.QL`
 fragment on Todo {
 complete,
 id,
 text,
 }
 `,
 },
 });
 5PEP class Todo extends React.Component {
 render() {
 return (
 <li>
 <div className=“view"> <input
 checked={this.props.todo.complete}
 className="toggle"
 onChange={this._handleCompleteChange}
 type="checkbox"
 /> <label>
 {this.props.todo.text}
 </label>
 <button
 className="destroy"
 onClick={this._handleDestroyClick}
 />
 </div>
 </li>
 );
 }
 }
19. ͜͜·ͰͰɺ w 3FBDU
    
    3FMBZ
    w (SBQI2-
    ͷΫϥΠΞϯτͷ४උ͕Ͱ͖ͨ
    w αʔό͸ʁ
20. &MJYJS
21. &MJYJS w ؔ਺ܕݴޠ select( where( from(w in Weather), [w], w.population > 0), [w], w.city)
22. &MJYJS w ύΠϓϥΠϯ
    w લͷؔ਺ͷ໭Γ஋Λɺ࣍ͷؔ਺ͷୈ̍Ҿ਺ʹ౉͢ɻ
    w ؔ਺Λॎʹදݱ͢Δ͜ͱͰɺؔ਺ͷؔ܎΍ྲྀΕΛΘ͔Γ ΍͘͢දݱͰ͖Δɻ from(w in Weather) |> where([w], w.population > 0) |> select([w], w.city)
23. &MJYJS w ϚΫϩ
    w %4-
    ʢಠࣗͷݴޠʣΛ࡞Δ͜ͱ͕Ͱ͖Δ from(w in Weather) |> where([w], w.population > 0) |> select([w], w.city)
24. &DUP w σʔλϕʔεૢ࡞༻ͷϞδϡʔϧ
    w 03.
    ͷΑ͏ͳ໾ׂɻ
    w %4-
    Ͱσʔλϕʔεͷૢ࡞Λهड़
25. &DUP %4-
    w จͷߏ଄͸
    &MJYJS
    ͕ͩɺҙຯ͸ಠࣗʹղऍ
    w ྫɿԼͷྫͰɺMJTU
    ΍
    NBQ
    ͷදݱ͕ͩɺG
    ΍
    V
    ͕ಥવొ৔͠ ͍ͯͯɺ&MJYJS
    ͱͯ͠͸ਖ਼͘͠ͳ͍
    w TFMFDU
    ΍
    MJNJU
    ͷ
    
    ͷத͸
    &DUP
    ઐ༻ͷݴޠ
    %-4 feed = RssFeed |> Query.select([f], %{ id: f.id, title: f.title }) |> Query.limit([u], 1) |> Repo.all
26. &DUP &DUP
    Λ࢖ͬͯ
    (SBQI2-
    ͷ
    RVFSZ
    Ͱࢦఆ͞Εͨ ϑΟʔϧυͷΈΛऔಘ͢Δɻ (SBQI2-
    "1*
    ʹσʔλΛฦ͢ʹ͸ʁ
27. &DUP w TFMFDU
    ʹࢦఆ͢ΔΧϥϜΛߏங͠ͳ͚Ε͹ ͳΒ͍ɻ
    w TFMFDU
    ͷ
    
    ͷத͸
    &DUP
    ಠࣗͷධՁ͕ͩɺ ֎ʹग़Δͱ
    &MJYJS
    ͱͯ͠ධՁ͞ΕΔͷ Ͱɺ֎ͰߏஙͰ͖ͳ͍ɻ cols = %{ title: f.title, summary: f.summary } feed = RssFeed |> Query.select([f], cols) |> Query.limit([u], 1) |> Repo.all fragment on RssFeed {
 title,
 subtitle,
 summary
 }
28. &DUP w ৽͍͠
    %4-
    ʢখ͞ͳϚΫϩʣΛ࡞੒͢Δ
    w 2VFSZ&YTFMFDU
    <lUJUMFz
    lTVNNBSZz>
    w &DUP
    ͷ
    TFMFDU
    ͸ԿΛ͍ͯ͠Δ͔ʁ
    w Ecto.Query.Select.build/4
    ΛݺΜͰ͍Δɻ defmodule Ecto.Query do defmacro select(query, binding, expr) do
 Select.build(query, binding, expr, __CALLER__)
 end end
29. &DUP defmodule QueryEx do
 defmacro select(query, cols) do
 quote do
 Ecto.Query.Builder.Select.build(unquote(query), [{:f, [], nil}], ɹɹɹɹɹɹQueryEx.make_select(unquote(cols)), __ENV__)
 |> Code.eval_quoted
 |> elem(0)
 end
 end
 
 def make_select(cols) do
 {:%{}, [], make_col([], cols)}
 end
 
 defp make_col(cols, [col|tl]) do
 cols = Keyword.put(cols, String.to_atom(col), ɹɹɹɹɹɹɹɹɹɹɹɹɹɹ{{:., [], [{:f, [], nil}, String.to_atom(col)]}, [], []})
 make_col(cols, tl)
 end
 
 defp make_col(cols, []) do
 cols
 end
 end

30. %&.0
31. (SBQI2-
    Λ
    3FMBZ
    ͱ
    1IPFOJY
    Ͱ࣮૷͢Δ
32. 1IPFOJY w &MJYJS
    ͷ
    3VCZ
    PO
    3BJMT
    ͷΑ͏ͳαʔόͷϑϨʔϜ ϫʔΫ
33. ࢀߟࢿྉ w IUUQUFDICMPHOFUqJYDPNFNCSBDJOHEJ⒎FSFODFT JOTJEFOFUqJYIUNM
    w IUUQGBDFCPPLHJUIVCJPHSBQIRM
    w IUUQTGBDFCPPLHJUIVCJPSFBDU
    w IUUQTGBDFCPPLHJUIVCJPSFMBZ
    w αϯϓϧίʔυ
    w IUUQTHJUIVCDPNZBTVIJSPPLBEBBLUTL TBNQMF@QIPFOJY@SFBDU