gatsby-source-storyblok VS isomorphic-fetch

Gatsby SDK - v7.0.0

We at Storyblok have also already dipped our toes into the world of open source by developing SDKs for to integrate Storyblok with different frontend technologies a little more conveniently. While of course there is the storyblok-js-client, which you can use to implement Storyblok your project, the DevRel team has started to create and maintain different SDKs like the one for Gatsby or Svelte to make it even easier to work with your favorite Technology and Storyblok.

Happy new year! After the new year and holiday season, our Gatsby SDK (gatsby-source-storyblok) has now removed axios🎉

During this summer, we have been working on to support TypeScript in our SDK ecosystem. We have TypeScript for @storyblok/js SDK, @storyblok/svelte SDK, @storyblok/vue & @storyblok/vue-2 SDK, @storyblok/react SDK... and finally, gatsby-source-storyblok (Gatsby SDK) also supports TypeScript👏

i.e. You can initialize just once in components/layout.jsx if you use gatsby-source-storyblok for your Gatsby projects.

This new version uses the latest version of our js-client - which means we are finally removing Axios in favor of native Fetch API (polyfillable via isomorphic-fetch).

In redux-observable is it possible to use isomporphic-fetch instead of Rx.DOM.ajax?

The SDK now uses the Fetch API under the hood. If your environment doesn't support it, install a polyfill like isomorphic-fetch. More information can be found on the storyblok-js-client README.

You don't need to install extra isomorphic-fetch into your Storyblok & Gatsby applications.

You can get around some of the above issues using a library called isomorphic-fetch, but not all of them. It also hasn’t been updated since 2015, and is locked on v2.x of node-fetch (whereas v3 has been out for some time now)

I have been happily using isomorphic-fetch till I needed to send PATCH method to the server.

import React from 'react';export default class RemoteText extends React.PureComponent { constructor(props) { super(props); this.state = {text: null}; fetch(props.src).then(res => res.text()).then(text => { this.setState({text}); }) } render() { if(this.state.text) { return {this.state.text}; } return null; }} Even if I use isomorphic-fetch, I get this warning:

Not to play devil's advocate or anything, but in all fairness, fetch can use an AbortController to be cancellable. Also, it/they can easily be supported in older browsers through a polyfill, which is substantially lighter on bundle size than Axios, esp for newer browsers where the polyfills adds no new code. Short digression: I love isomorphic-fetch because it polyfills fetch in both old browsers and NodeJS, meaning I only need to remember one simple API (fetch) for network calls regardless of the environment. I'd much rather have to learn only one stable, native API than add on additional third party APIs that can change over time or require additional plugins to make it work (e.g. moxios).