Nomenclature Processing Machine

    jsx-isomorphic-fetch

    1.1.0 • Public • Published

    What does JSX Isomorphic Fetch do?

    JSX Isomorphic Fetch is a provider that allows your Isomorphic applications to resolve fetch requests before responding to the user. This enables you to send api data or anything else down in your initial request/html. This package does not interfere with vanilla fetch functionality, instead it provides a new function that is supplied in the context passed down from the provider.

    Performance

    Having your server wait for api requests to complete before it responds to the users request is bad for performance. To avoid the performance degradation all requests that use this should be cached on your server.

    Security

    Because best practices with "JSX Isomorphic Fetch" require you to cache the request, all secure api requests should done through a regular fetch call and not with "JSX Isomorphic Fetch"

    How to use it

    There are three main parts to using "JSX Isomorphic Fetch" setting up the provider, getting the fetch call from context, and triggering two renderToString calls.

    Provider

    The Provider should be the highest level component in your application and it should be used as the wrapper in the render or renderToString call.

    React: Browser Entry Rendering

    import {Provider, IsomorphicFetch} from 'jsx-isomorphic-fetch'
    let isomorphicFetch = new IsomorphicFetch()
    isomorphicFetch.store = window._isomorphicFetch_store_
    
    render(
      <Provider isomorphicFetch={isomorphicFetch}>
        <MyApplication />
      </Provider>,
      document.querySelector('#mount')
    )
    

    Preact: Browser Entry Rendering

    import {Provider, IsomorphicFetch} from 'jsx-isomorphic-fetch'
    let isomorphicFetch = new IsomorphicFetch()
    isomorphicFetch.store = window._isomorphicFetch_store_
    
    render(
      <Provider id="application" isomorphicFetch={isomorphicFetch}>
        <MyApplication />
      </Provider>,
      document.querySelector('#mount'),
      document.querySelector('#application')
    )
    
    

    Fetching Data

    The Provider passes down isomorphicFetch as context, you need to get it out of context before you can use it. IsomorphicFetch has two functions you will want to use here: fetch and clear.

    Initial state cant be set in constructor as context is not avalible yet, initial state is what allows the server to render the data.

    import PropTypes from 'prop-types'
    
    class MyComponent extends Component {
      constructor(props) {
        super(props)
        this.state = {}
      }
    
      componentWillMount() {
        const initialData = this.context.isomorphicFetch.initial('MyDataID')
    
        // Set initial states
        this.state.title = initialData ? initialData.title : null
    
        this.context.isomorphicFetch.fetch(
          'MyDataID',
          // Array of vanilla js fetch arguments
          ['/my_data.json', {method: 'get'}],
    
          // This is a middleware function that allows you to process the fetch response.
          function(response) {
            return response.json()
          }
        ).then(function(data) {
          // do stuff with data
        })
    
        // every call to the same url will be cached, to clear the cache use .clear
        // the cache cannot be cleared on the server with this.
        this.context.isomorphicFetch.clear('MyDataID')
      }
    
      componentWillUnmount () {
        this.context.isomorphicFetch.clear('MyDataID')
      }
    }
    
    MyComponent.childContextTypes = {
      isomorphicFetch: PropTypes.func
    }
    

    Rendering on the server

    To render on the server it requires you to run render to string twice. The second render waits for all promises to complete.

    import render from 'preact-render-to-string' // or react alternative
    import {Provider, IsomorphicFetch} from 'jsx-isomorphic-fetch'
    
    let isomorphicFetch = new IsomorphicFetch()
    isomorphicFetch.isServer = true
    
    let application = (  
      <Provider id="application" isomorphicFetch={isomorphicFetch}>
        <MyApplication />
      </Provider>
    )
    
    // Trigger initial renderToString this will start resolving the data.
    render(application)
    
    // .resolve returns a promise
    isomorphicFetch.resolve().then(function() {
      // .store will already be processed with  JSON.stringify
      let myAppAsHTMLString = render(application)
      let myAppsData = '<script> window._isomorphicFetch_store_ = ' + isomorphicFetch.store + '</script>'
    
      // Resolve your server request however your server is setup to do that.
      resolveMyServerRequest(myAppAsHTMLString, myAppsData)
    })
    
    

    Install

    npm i jsx-isomorphic-fetch

    DownloadsWeekly Downloads

    4

    Version

    1.1.0

    License

    ISC

    Last publish

    Collaborators

    • horrorandtropics