Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

React Suspense on Apollo

Avatar for Kodai Nakamura Kodai Nakamura
August 02, 2018
Programming
1.6k
4

React Suspense on Apollo

Avatar for Kodai Nakamura

Kodai Nakamura

August 02, 2018

More Decks by Kodai Nakamura

See All by Kodai Nakamura
React Fire
Avatar for Kodai Nakamura kdnk
2
1.5k
wejs24.pdf
Avatar for Kodai Nakamura kdnk
1
1.2k
Local State Management with Apollo
Avatar for Kodai Nakamura kdnk
2
1.7k

Other Decks in Programming

See All in Programming
Railsのためのパスキー実践入門 〜マルチテナントSaaSでの意思決定〜
Avatar for utakaha utakaha
2
580
Atomic Design, Enforced: Scaling Mobile Design Systems (next.app devCon / droidCon Berlin 2026)
Avatar for Stelios Frantzeskakis steliosf
PRO
0
170
sbt 2.0: takeoff
Avatar for Eugene Yokota eed3si9n
0
160
[Dev Group Paris Octobre 26] Agentforce, SIforce, Claudeforce, Slackbot… on s'y retrouve ?
Avatar for Nathan Abondance nabondance
0
110
コードレビューのボトルネックを"する側"と"される側"の両面から解消する
Avatar for yub0n yub0n
2
1.6k
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
230
IBM Bob Dojo #1 仕様駆動開発入門
Avatar for Akira Onishi (IBM) oniak3ibm
PRO
0
390
ソニーのクラウド共通基盤の変遷と AI時代の開発スタイルに合わせた進化 / The Journey of Sony’s Common Cloud Platform and Its Evolution for AI-Native Development
Avatar for KenjiYoneyama kenjiyoneyama
0
270
Domain-Driven Transformation
Avatar for Henning Schwentner hschwentner
2
2.3k
iOS 27でニュースアプリはどう変わる！？ 〜日経電子版の新機能対応と、開発事例から〜
Avatar for Kazuki Nakashima lynnswap
7
13k
AmebaブログはKMPから卒業します
Avatar for 伊藤光次郎 kmars0605
0
190
動作中のプログラムの中身をリアルタイムに覗く / Realtime Debugger for CSharp with Roslyn
Avatar for Prota prota
1
1.9k

Featured

See All Featured
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
970
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
490
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.4k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
1k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.4k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
400
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
50
10k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k

Transcript

  1. ©2018 Wantedly, Inc. React Suspense on Apollo Meguro.es #16 @

    LIVESENSE 2nd.August.2018 - Kodai Nakamura

  2. ©2018 Wantedly, Inc. React Suspense on Apollo Meguro.es #16 @

    LIVESENSE 2nd.August.2018 - Kodai Nakamura

  3. ©2018 Wantedly, Inc. ࣗݾ঺հ ,PEBJ/BLBNVSB (JUIVC!LEOL 5XJUUFS!LEOL@@ 4PGUXBSF&OHJOFFSBU8BOUFEMZ *OD৽ଔ +BWB4DSJQU

    5ZQF4DSJQU 3FBDU 3BJMT 3VCZ

  4. ©2018 Wantedly, Inc. "QPMMPͰ3FBDU4VTQFOTF͕࢖͑Δʁ Page Title Page Subtitle

  5. ©2018 Wantedly, Inc. ࠓ೔͸"QPMMPͰ ඇಉظϨϯμϦϯά͕Ͱ͖Δ "TZOD.PEFͷ঺հͰ͢ Page Title Page Subtitle

  6. ©2018 Wantedly, Inc. ໨࣍ ‣3FBDU4VTQFOTF ‣"QPMMP$MJFOUͰ3FBDU4VTQFOTF

  7. ©2018 Wantedly, Inc. 3FBDUl4VTQFOTFz  Page Title Page Subtitle

  8. ©2018 Wantedly, Inc. React Suspense 3FBDUl4VTQFOTFz ‣ ࠓ೥ͷ+4$POG*DFMBOEͰൃද͞Εͨ ‣ ͓ͦΒ͘SFBDUͰ͸࢖͑Δ

    ‣ ඇಉظΛ͍͍ײ͡ʹѻ͑Δ΋ͷ ‣ SFOEFS ͷதͰUISPXOFX1SPNJTF͢Δ

  9. ©2018 Wantedly, Inc. React Suspense ͳΜͰඞཁʁ ‣ 69ͷ޲্ ‣ OFUXPSL؀ڥͷҧ͍ʹରԠ͢Δ

     4QJOOFS͕Ұॠ͚ͩදࣔ͞ΕΔ  ը૾͕൒୺ͳঢ়ଶͰSFOEFS͞ΕΔ ‣ ࠓͩͱɺMPBEJOH͔Ͳ͏͔ͷνΣοΫΛ͢Δ

  10. ©2018 Wantedly, Inc. React Suspense த਎͸Ͳ͏ͳͬͯΔʁ ‣ SFOEFSϝιουͷதͰ͸DBDIF͔Β஋Λऔಘ͢Δ ‣ DBDIF͕͋Δͱ͖͸ɺී௨ʹSFOEFS

    ‣ DBDIF͕ͳ͍ͱ͖͸ɺUISPXOFX1SPNJTF͢Δ  1SPNJTF͕SFTPMWF͞Ε͍ͯͳ͍৔߹͸SFOEFS͠ͳ͍  1SPNJTF͕SFTPMWF͞ΕͨΒ࠶SFOEFS

  11. ©2018 Wantedly, Inc. React Suspense த਎͸Ͳ͏ͳͬͯΔʁ ‣ SFOEFSϝιουͷதͰ͸DBDIF͔Β஋Λऔಘ͢Δ ‣ DBDIF͕͋Δͱ͖͸ɺී௨ʹSFOEFS

    ‣ DBDIF͕ͳ͍ͱ͖͸ɺUISPXOFX1SPNJTF͢Δ  1SPNJTF͕SFTPMWF͞Ε͍ͯͳ͍৔߹͸SFOEFS͠ͳ͍  1SPNJTF͕SFTPMWF͞ΕͨΒ࠶SFOEFS 1SPNJTFΛUISPX 

  12. ©2018 Wantedly, Inc. React Suspense &SSPS#PVOEBSJFT class ErrorBoundary extends React.Component

    { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { this.setState({ hasError: true }); logErrorToMyService(error, info); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } } <ErrorBoundary> <MyWidget /> </ErrorBoundary> ‣ ࢠίϯϙʔωϯτͷΤϥʔΛ਌ίϯϙʔωϯτͰ
 DBUDI͢Δ࢓૊Έ ‣ +4ͷDBUDIΈ͍ͨͳ͜ͱ͕$PNQPOFOUͰ
 Ͱ͖ΔΑ͏ʹͳΔ ‣ એݴతʹ͔͚Δ ‣ DPNQPOFOU%JE$BUDIͰัଊͰ͖Δ

  13. ©2018 Wantedly, Inc. React Suspense &SSPS#PVOEBSJFT class ErrorBoundary extends React.Component

    { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { this.setState({ hasError: true }); logErrorToMyService(error, info); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } } <ErrorBoundary> <MyWidget /> </ErrorBoundary> ‣ ࢠίϯϙʔωϯτͷΤϥʔΛ਌ίϯϙʔωϯτͰ
 DBUDI͢Δ࢓૊Έ ‣ +4ͷDBUDIΈ͍ͨͳ͜ͱ͕$PNQPOFOUͰ
 Ͱ͖ΔΑ͏ʹͳΔ ‣ એݴతʹ͔͚Δ ‣ DPNQPOFOU%JE$BUDIͰัଊͰ͖Δ

  14. ©2018 Wantedly, Inc. React Suspense &SSPS#PVOEBSJFT class ErrorBoundary extends React.Component

    { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { this.setState({ hasError: true }); logErrorToMyService(error, info); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } } <ErrorBoundary> <MyWidget /> </ErrorBoundary> ‣ ࢠίϯϙʔωϯτͷΤϥʔΛ਌ίϯϙʔωϯτͰ
 DBUDI͢Δ࢓૊Έ ‣ +4ͷDBUDIΈ͍ͨͳ͜ͱ͕$PNQPOFOUͰ
 Ͱ͖ΔΑ͏ʹͳΔ ‣ એݴతʹ͔͚Δ ‣ DPNQPOFOU%JE$BUDIͰัଊͰ͖Δ

  15. ©2018 Wantedly, Inc. React Suspense &SSPS#PVOEBSJFT class ErrorBoundary extends React.Component

    { constructor(props) { super(props); this.state = { hasError: false }; } componentDidCatch(error, info) { this.setState({ hasError: true }); logErrorToMyService(error, info); } render() { if (this.state.hasError) { return <h1>Something went wrong.</h1>; } return this.props.children; } } <ErrorBoundary> <MyWidget /> </ErrorBoundary> ‣ ࢠίϯϙʔωϯτͷΤϥʔΛ਌ίϯϙʔωϯτͰ
 DBUDI͢Δ࢓૊Έ ‣ +4ͷDBUDIΈ͍ͨͳ͜ͱ͕$PNQPOFOUͰ
 Ͱ͖ΔΑ͏ʹͳΔ ‣ એݴతʹ͔͚Δ ‣ DPNQPOFOU%JE$BUDIͰัଊͰ͖Δ

  16. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ import {createResource} from 'simple-cache-provider'; async function searchMovies(query) { const response = await fetch(/* URL */); return await response.json(); } const readMovieSearchResults = createResource(searchMovies); function Results(/* args */) { // ... const {results} = readMovieSearchResults(cache, query); return ( <div> {results.slice(0, 5).map(result => { return ( <Result result={result} // ... /> ); })} </div> ); }

  17. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ import {createResource} from 'simple-cache-provider'; async function searchMovies(query) { const response = await fetch(/* URL */); return await response.json(); } const readMovieSearchResults = createResource(searchMovies); function Results(/* args */) { // ... const {results} = readMovieSearchResults(cache, query); return ( <div> {results.slice(0, 5).map(result => { return ( <Result result={result} // ... /> ); })} </div> ); }

  18. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ import {createResource} from 'simple-cache-provider'; async function searchMovies(query) { const response = await fetch(/* URL */); return await response.json(); } const readMovieSearchResults = createResource(searchMovies); function Results(/* args */) { // ... const {results} = readMovieSearchResults(cache, query); return ( <div> {results.slice(0, 5).map(result => { return ( <Result result={result} // ... /> ); })} </div> ); }

  19. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ import {createResource} from 'simple-cache-provider'; async function searchMovies(query) { const response = await fetch(/* URL */); return await response.json(); } const readMovieSearchResults = createResource(searchMovies); function Results(/* args */) { // ... const {results} = readMovieSearchResults(cache, query); return ( <div> {results.slice(0, 5).map(result => { return ( <Result result={result} // ... /> ); })} </div> ); }

  20. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ import {createResource} from 'simple-cache-provider'; async function searchMovies(query) { const response = await fetch(/* URL */); return await response.json(); } const readMovieSearchResults = createResource(searchMovies); function Results(/* args */) { // ... const {results} = readMovieSearchResults(cache, query); return ( <div> {results.slice(0, 5).map(result => { return ( <Result result={result} // ... /> ); })} </div> ); } ͜͜ͰDBDIF͔Βऔͬͯ͘Δ

  21. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ import {createResource} from 'simple-cache-provider'; async function searchMovies(query) { const response = await fetch(/* URL */); return await response.json(); } const readMovieSearchResults = createResource(searchMovies); function Results(/* args */) { // ... const {results} = readMovieSearchResults(cache, query); return ( <div> {results.slice(0, 5).map(result => { return ( <Result result={result} // ... /> ); })} </div> ); } DBDIF͕ͳ͔ͬͨΒUISPXOFX1SPNJTF

  22. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ let cachedResults = null; const readMovieSearchResults = ({query}) => { if (cachedResults) { return cachedResults; } throw new Promise(async resolve => { const results = await searchMovies(query); cachedResults = results; resolve(); }); }; TJNQMFDBDIFQSPWJEFS͕ͳ͔ͬͨΒ͜Μͳײ͡ʹͳΔ͸ͣ

  23. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ let cachedResults = null; const readMovieSearchResults = ({query}) => { if (cachedResults) { return cachedResults; } throw new Promise(async resolve => { const results = await searchMovies(query); cachedResults = results; resolve(); }); }; TJNQMFDBDIFQSPWJEFS͕ͳ͔ͬͨΒ͜Μͳײ͡ʹͳΔ͸ͣ

  24. ©2018 Wantedly, Inc. React Suspense TJNQMFDBDIFQSPWJEFS ‣ DBDIFΛ͍ͯ͠Δͱ͜Ζͷ࣮૷ ‣ GBDFCPPLSFBDUʹೖ͍ͬͯΔ

    ‣ ໊લͱ͔࣮૷ͱ͔͸มΘΔ͔΋ let cachedResults = null; const readMovieSearchResults = ({query}) => { if (cachedResults) { return cachedResults; } throw new Promise(async resolve => { const results = await searchMovies(query); cachedResults = results; resolve(); }); }; TJNQMFDBDIFQSPWJEFS͕ͳ͔ͬͨΒ͜Μͳײ͡ʹͳΔ͸ͣ

  25. ©2018 Wantedly, Inc. React Suspense 3FBDU5JNFPVU ‣ ·ͣEJE5JNFPVUGBMTFͰݺͼग़͞ΕΔ ‣ DIJMESFO͕SFOEFS͞ΕΔͱDBDIFݟʹߦ͘

    ‣ ଘࡏ͠ͳ͍ͱ͖͸ɺ1SPNJTF͕UISPX͞ΕΔ ‣ UISPXΛDBUDIͨ͠Βɺ΋͏Ұ౓࣮ߦ ‣ EJE5JNFPVUUSVFͱͳͬͯɺGBMMCBDL͕දࣔ͞ΕΔ ‣ 1SPNJTF͕SFTPMWF͢ΔͱEJE5JNFPVUGBMTF DIJMESFO͕SFOEFS͞ΕΔ import React, {Fragment} from 'react'; function Timeout({ms, fallback, children}) { return ( <React.Timeout ms={ms}> {didTimeout => ( <Fragment> <span hidden={didTimeout}>{children}</span> {didTimeout ? fallback : null} </Fragment> )} </React.Timeout> ); } export default Timeout;

  26. ©2018 Wantedly, Inc. React Suspense 3FBDU5JNFPVU ‣ ·ͣEJE5JNFPVUGBMTFͰݺͼग़͞ΕΔ ‣ DIJMESFO͕SFOEFS͞ΕΔͱDBDIFݟʹߦ͘

    ‣ ଘࡏ͠ͳ͍ͱ͖͸ɺ1SPNJTF͕UISPX͞ΕΔ ‣ UISPXΛDBUDIͨ͠Βɺ΋͏Ұ౓࣮ߦ ‣ EJE5JNFPVUUSVFͱͳͬͯɺGBMMCBDL͕දࣔ͞ΕΔ ‣ 1SPNJTF͕SFTPMWF͢ΔͱEJE5JNFPVUGBMTF DIJMESFO͕SFOEFS͞ΕΔ import React, {Fragment} from 'react'; function Timeout({ms, fallback, children}) { return ( <React.Timeout ms={ms}> {didTimeout => ( <Fragment> <span hidden={didTimeout}>{children}</span> {didTimeout ? fallback : null} </Fragment> )} </React.Timeout> ); } export default Timeout;

  27. ©2018 Wantedly, Inc. React Suspense 3FBDU5JNFPVU ‣ ·ͣEJE5JNFPVUGBMTFͰݺͼग़͞ΕΔ ‣ DIJMESFO͕SFOEFS͞ΕΔͱDBDIFݟʹߦ͘

    ‣ ଘࡏ͠ͳ͍ͱ͖͸ɺ1SPNJTF͕UISPX͞ΕΔ ‣ UISPXΛDBUDIͨ͠Βɺ΋͏Ұ౓࣮ߦ ‣ EJE5JNFPVUUSVFͱͳͬͯɺGBMMCBDL͕දࣔ͞ΕΔ ‣ 1SPNJTF͕SFTPMWF͢ΔͱEJE5JNFPVUGBMTF DIJMESFO͕SFOEFS͞ΕΔ import React, {Fragment} from 'react'; function Timeout({ms, fallback, children}) { return ( <React.Timeout ms={ms}> {didTimeout => ( <Fragment> <span hidden={didTimeout}>{children}</span> {didTimeout ? fallback : null} </Fragment> )} </React.Timeout> ); } export default Timeout;

  28. ©2018 Wantedly, Inc. React Suspense 3FBDU5JNFPVU ‣ ·ͣEJE5JNFPVUGBMTFͰݺͼग़͞ΕΔ ‣ DIJMESFO͕SFOEFS͞ΕΔͱDBDIFݟʹߦ͘

    ‣ ଘࡏ͠ͳ͍ͱ͖͸ɺ1SPNJTF͕UISPX͞ΕΔ ‣ UISPXΛDBUDIͨ͠Βɺ΋͏Ұ౓࣮ߦ ‣ EJE5JNFPVUUSVFͱͳͬͯɺGBMMCBDL͕දࣔ͞ΕΔ ‣ 1SPNJTF͕SFTPMWF͢ΔͱEJE5JNFPVUGBMTF DIJMESFO͕SFOEFS͞ΕΔ import React, {Fragment} from 'react'; function Timeout({ms, fallback, children}) { return ( <React.Timeout ms={ms}> {didTimeout => ( <Fragment> <span hidden={didTimeout}>{children}</span> {didTimeout ? fallback : null} </Fragment> )} </React.Timeout> ); } export default Timeout;

  29. ©2018 Wantedly, Inc. React Suspense 3FBDU5JNFPVU ‣ ·ͣEJE5JNFPVUGBMTFͰݺͼग़͞ΕΔ ‣ DIJMESFO͕SFOEFS͞ΕΔͱDBDIFݟʹߦ͘

    ‣ ଘࡏ͠ͳ͍ͱ͖͸ɺ1SPNJTF͕UISPX͞ΕΔ ‣ UISPXΛDBUDIͨ͠Βɺ΋͏Ұ౓࣮ߦ ‣ EJE5JNFPVUUSVFͱͳͬͯɺGBMMCBDL͕දࣔ͞ΕΔ ‣ 1SPNJTF͕SFTPMWF͢ΔͱEJE5JNFPVUGBMTF
 DIJMESFO͕SFOEFS͞ΕΔ import React, {Fragment} from 'react'; function Timeout({ms, fallback, children}) { return ( <React.Timeout ms={ms}> {didTimeout => ( <Fragment> <span hidden={didTimeout}>{children}</span> {didTimeout ? fallback : null} </Fragment> )} </React.Timeout> ); } export default Timeout;

  30. ©2018 Wantedly, Inc. React Suspense 3FBDU5JNFPVU ‣ ·ͣEJE5JNFPVUGBMTFͰݺͼग़͞ΕΔ ‣ DIJMESFO͕SFOEFS͞ΕΔͱDBDIFݟʹߦ͘

    ‣ ଘࡏ͠ͳ͍ͱ͖͸ɺ1SPNJTF͕UISPX͞ΕΔ ‣ UISPXΛDBUDIͨ͠Βɺ΋͏Ұ౓࣮ߦ ‣ EJE5JNFPVUUSVFͱͳͬͯɺGBMMCBDL͕දࣔ͞ΕΔ ‣ 1SPNJTF͕SFTPMWF͢ΔͱEJE5JNFPVUGBMTF
 DIJMESFO͕SFOEFS͞ΕΔ import React, {Fragment} from 'react'; function Timeout({ms, fallback, children}) { return ( <React.Timeout ms={ms}> {didTimeout => ( <Fragment> <span hidden={didTimeout}>{children}</span> {didTimeout ? fallback : null} </Fragment> )} </React.Timeout> ); } export default Timeout;

  31. ©2018 Wantedly, Inc. React Suspense 3FBDU5JNFPVU ‣ ·ͣEJE5JNFPVUGBMTFͰݺͼग़͞ΕΔ ‣ DIJMESFO͕SFOEFS͞ΕΔͱDBDIFݟʹߦ͘

    ‣ ଘࡏ͠ͳ͍ͱ͖͸ɺ1SPNJTF͕UISPX͞ΕΔ ‣ UISPXΛDBUDIͨ͠Βɺ΋͏Ұ౓࣮ߦ ‣ EJE5JNFPVUUSVFͱͳͬͯɺGBMMCBDL͕දࣔ͞ΕΔ ‣ 1SPNJTF͕SFTPMWF͢ΔͱEJE5JNFPVUGBMTFɻ DIJMESFO͕SFOEFS͞ΕΔ import React, {Fragment} from 'react'; function Timeout({ms, fallback, children}) { return ( <React.Timeout ms={ms}> {didTimeout => ( <Fragment> <span hidden={didTimeout}>{children}</span> {didTimeout ? fallback : null} </Fragment> )} </React.Timeout> ); } export default Timeout;

  32. ©2018 Wantedly, Inc. ‣ ·ͣEJE5JNFPVUGBMTFͰݺͼग़͞ΕΔ ‣ DIJMESFO͕SFOEFS͞ΕΔͱDBDIFݟʹߦ͘ ‣ ଘࡏ͠ͳ͍ͱ͖͸ɺ1SPNJTF͕UISPX͞ΕΔ ‣

    UISPXΛDBUDIͨ͠ΒɺNT଴ͬͯ΋͏Ұ౓࣮ߦ ‣ EJE5JNFPVUUSVFͱͳͬͯɺGBMMCBDL͕දࣔ͞ΕΔ ‣ 1SPNJTF͕SFTPMWF͢ΔͱEJE5JNFPVUGBMTFɻ DIJMESFO͕SFOEFS͞ΕΔ React Suspense 3FBDU5JNFPVU import React, {Fragment} from 'react'; function Timeout({ms, fallback, children}) { return ( <React.Timeout ms={ms}> {didTimeout => ( <Fragment> <span hidden={didTimeout}>{children}</span> {didTimeout ? fallback : null} </Fragment> )} </React.Timeout> ); } export default Timeout;

  33. ©2018 Wantedly, Inc. "QPMMP$MJFOUͰ΋Ͱ͖Δʁ Page Title Page Subtitle

  34. ©2018 Wantedly, Inc. React Suspense on Apollo "TZOD.PEF const Photo

    = ({ breed }) => ( <Query suspend query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data }) => { return <Image src={data.dog.displayImage} />; }} </Query> ); ‣ ͳΜͯݺͿ͔͸Θ͔Βͳ͍ ‣ ࠷ॳ͸QSPQTͷ໊લ͕"TZD.PEFͩͬͨ ‣ 3FBDU"QPMMPͰϦϦʔε͢ΔΒ͍͠ ‣ "QPMMP$MJFOUͷ2VFSZ .VUBUJPOίϯ ϙʔωϯτͰ؆୯ʹඇಉظϨϯμϦϯά͕ Ͱ͖Δ

  35. ©2018 Wantedly, Inc. React Suspense on Apollo const Photo =

    ({ breed }) => ( <Query suspend query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data }) => { return <Image src={data.dog.displayImage} />; }} </Query> ); ‣ ͳΜͯݺͿ͔͸Θ͔Βͳ͍ ‣ ࠷ॳ͸QSPQTͷ໊લ͕"TZD.PEFͩͬͨ ‣ 3FBDU"QPMMPͰϦϦʔε͢ΔΒ͍͠ ‣ "QPMMP$MJFOUͷ2VFSZ .VUBUJPOίϯ ϙʔωϯτͰ؆୯ʹඇಉظϨϯμϦϯά͕ Ͱ͖Δ "TZOD.PEF

  36. ©2018 Wantedly, Inc. React Suspense on Apollo const Photo =

    ({ breed }) => ( <Query suspend query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data }) => { return <Image src={data.dog.displayImage} />; }} </Query> ); const Photo = ({ breed }) => ( <Query query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data, loading }) => { if (loading) return <Loading /> return <Image src={data.dog.displayImage} />; }} </Query> ); ‣ ͳΜͯݺͿ͔͸Θ͔Βͳ͍ ‣ ࠷ॳ͸QSPQTͷ໊લ͕"TZD.PEFͩͬͨ ‣ 3FBDU"QPMMPͰϦϦʔε͢ΔΒ͍͠ ‣ "QPMMP$MJFOUͷ2VFSZ .VUBUJPOίϯ ϙʔωϯτͰ؆୯ʹඇಉظϨϯμϦϯά͕ Ͱ͖Δ "TZOD.PEF

  37. ©2018 Wantedly, Inc. React Suspense on Apollo const Photo =

    ({ breed }) => ( <Query suspend query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data }) => { return <Image src={data.dog.displayImage} />; }} </Query> ); const Photo = ({ breed }) => ( <Query query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data, loading }) => { if (loading) return <Loading /> return <Image src={data.dog.displayImage} />; }} </Query> ); ‣ ͳΜͯݺͿ͔͸Θ͔Βͳ͍ ‣ ࠷ॳ͸QSPQTͷ໊લ͕"TZD.PEFͩͬͨ ‣ 3FBDU"QPMMPͰϦϦʔε͢ΔΒ͍͠ ‣ "QPMMP$MJFOUͷ2VFSZ .VUBUJPOίϯ ϙʔωϯτͰ؆୯ʹඇಉظϨϯμϦϯά͕ Ͱ͖Δ "TZOD.PEF

  38. ©2018 Wantedly, Inc. React Suspense on Apollo const Photo =

    ({ breed }) => ( <Query suspend query={GET_DOG_PHOTO} variables={breed && { breed }}> {({ data }) => { return <Image src={data.dog.displayImage} />; }} </Query> ); <Timeout ms={2000}> {expired => expired && selectedDog ? ( <Loading /> ) : ( <Photo breed={selectedDog} /> ) } </Timeout> ‣ ͳΜͯݺͿ͔͸Θ͔Βͳ͍ ‣ ࠷ॳ͸QSPQTͷ໊લ͕"TZD.PEFͩͬͨ ‣ 3FBDU"QPMMPͰϦϦʔε͢ΔΒ͍͠ ‣ "QPMMP$MJFOUͷ2VFSZ .VUBUJPOίϯ ϙʔωϯτͰ؆୯ʹඇಉظϨϯμϦϯά͕ Ͱ͖Δ "TZOD.PEF

  39. ©2018 Wantedly, Inc. React Suspense on Apollo Ͳ͏΍࣮ͬͯ૷͞Ε͍ͯΔ͔ class Query

    extends React.Component { // ... render() { return this.props.children(this.getQueryResult(this.state)); } //... } private getQueryResult = ({queryObservable, evictData}) => { const currentResult = queryObservable!.currentResult(); const { loading, networkStatus, errors } = currentResult; if (loading) { if (this.props.suspend) { throw this.state.queryObservable!.result(); } Object.assign(data.data, this.previousData, currentResult.data); } else if (error) { // ... }; ‣ SFOEFSͷதͰHFU2VFSZ3FTVMU͕ݺ͹Ε͍ͯΔ ‣ ͦͷதͰMPEJOHTVTQFOEͩͬͨΒ
 1SPNJTFΛUISPX

  40. ©2018 Wantedly, Inc. React Suspense on Apollo Ͳ͏΍࣮ͬͯ૷͞Ε͍ͯΔ͔ class Query

    extends React.Component { // ... render() { return this.props.children(this.getQueryResult(this.state)); } //... } private getQueryResult = ({queryObservable, evictData}) => { const currentResult = queryObservable!.currentResult(); const { loading, networkStatus, errors } = currentResult; if (loading) { if (this.props.suspend) { throw this.state.queryObservable!.result(); } Object.assign(data.data, this.previousData, currentResult.data); } else if (error) { // ... }; ‣ SFOEFSͷதͰHFU2VFSZ3FTVMU͕ݺ͹Ε͍ͯΔ ‣ ͦͷதͰMPEJOHTVTQFOEͩͬͨΒ
 1SPNJTFΛUISPX

  41. ©2018 Wantedly, Inc. React Suspense on Apollo Ͳ͏΍࣮ͬͯ૷͞Ε͍ͯΔ͔ class Query

    extends React.Component { // ... render() { return this.props.children(this.getQueryResult(this.state)); } //... } private getQueryResult = ({queryObservable, evictData}) => { const currentResult = queryObservable!.currentResult(); const { loading, networkStatus, errors } = currentResult; if (loading) { if (this.props.suspend) { throw this.state.queryObservable!.result(); } Object.assign(data.data, this.previousData, currentResult.data); } else if (error) { // ... }; ‣ SFOEFSͷதͰHFU2VFSZ3FTVMU͕ݺ͹Ε͍ͯΔ ‣ ͦͷதͰMPEJOHTVTQFOEͩͬͨΒ
 1SPNJTFΛUISPX

  42. ©2018 Wantedly, Inc. React Suspense on Apollo Ͳ͏΍࣮ͬͯ૷͞Ε͍ͯΔ͔ class Query

    extends React.Component { // ... render() { return this.props.children(this.getQueryResult(this.state)); } //... } private getQueryResult = ({queryObservable, evictData}) => { const currentResult = queryObservable!.currentResult(); const { loading, networkStatus, errors } = currentResult; if (loading) { if (this.props.suspend) { throw this.state.queryObservable!.result(); } Object.assign(data.data, this.previousData, currentResult.data); } else if (error) { // ... }; ‣ SFOEFSͷதͰHFU2VFSZ3FTVMU͕ݺ͹Ε͍ͯΔ ‣ ͦͷதͰMPEJOHTVTQFOEͩͬͨΒ
 1SPNJTFΛUISPX

  43. ©2018 Wantedly, Inc. React Suspense on Apollo Ͳ͏΍࣮ͬͯ૷͞Ε͍ͯΔ͔ class Query

    extends React.Component { // ... render() { return this.props.children(this.getQueryResult(this.state)); } //... } private getQueryResult = ({queryObservable, evictData}) => { const currentResult = queryObservable!.currentResult(); const { loading, networkStatus, errors } = currentResult; if (loading) { if (this.props.suspend) { throw this.state.queryObservable!.result(); } Object.assign(data.data, this.previousData, currentResult.data); } else if (error) { // ... }; ‣ SFOEFSͷதͰHFU2VFSZ3FTVMU͕ݺ͹Ε͍ͯΔ ‣ ͦͷதͰMPEJOHTVTQFOEͩͬͨΒ
 1SPNJTFΛUISPX

  44. ©2018 Wantedly, Inc. ·ͱΊ ‣4VQFOTF͸3FBDUͰ࢖͑ΔΑ͏ʹͳΔ ‣"QPMMPͰͷ"TZOD3FOEFSJOH͸3FBDU"QPMMPͰ  EFGFS4FU4UBUFΛ࢖ͬͨ-PX1SJPSJUZͱ͔΋࢖͑Δ ‣IUUQTDPEFTBOECPYJPT[LYWL͜͜Ͱ3FBDU4VTQFOTF৮ΕΔ ‣IUUQTDPEFTBOECPYJPTWKYM͜͜Ͱ"QPMMPͷ"TZODSFOEFSJOHΛ

    ৮ΕΔ