data-fetching.md (1176B)
1 ## Data Fetching with WHATWG Fetch 2 3 There is isomorphic `core/fetch` module that can be used the same way in both 4 client-side and server-side code as follows: 5 6 ```jsx 7 import fetch from '../core/fetch'; 8 9 export const path = '/products'; 10 export const action = async () => { 11 const response = await fetch('/graphql?query={products{id,name}}'); 12 const data = await response.json(); 13 return <Layout><Products {...data} /></Layout>; 14 }; 15 ``` 16 17 When this code executes on the client, the Ajax request will be sent via 18 GitHub's [fetch](https://github.com/github/fetch) library (`whatwg-fetch`), 19 that itself uses XHMLHttpRequest behind the scene unless `fetch` is supported 20 natively by the user's browser. 21 22 Whenever the same code executes on the server, it uses 23 [node-fetch](https://github.com/bitinn/node-fetch) module behind the scene that 24 itself sends an HTTP request via Node.js `http` module. It also converts 25 relative URLs to absolute (see `./core/fetch/fetch.server.js`). 26 27 Both `whatwg-fetch` and `node-fetch` modules have almost identical API. If 28 you're new to this API, the following article may give you a good introduction: 29 30 https://jakearchibald.com/2015/thats-so-fetch/ 31 32