gatsby-source-fetch

A simple Gatsbyjs data fetching plugin to leverage the power of axios

Install

npm i gatsby-source-fetch

gatsby-config.js

module.exports = {
    plugins: [
        // fetch data from some endpoint and load it into graphql
        {
            resolve: `gatsby-source-fetch`,
            options: {
                // required - root node name
                name: `footer`,

                // required - unique name to query data
                type: `html`,

                // required (unless overridden in axiosConfig) - url for endpoint
                url: `https://www.some-domain.com/common-html/header.html`,

                // optional - provide method (defaults to get)
                method: `get`,

                // optional - completely override axios config
                // see https://github.com/axios/axios#request-config
                axiosConfig: {
                    headers: { Accept: "text/html" },
                },
            },
        },

        // fetch a data and save it locally
        {
            resolve: `gatsby-source-fetch`,
            options: {
                name: `Favicon`,
                type: `icon`,
                url: `https://www.some-domain.com/icons/favicon.ico`,
                axiosConfig: {
                    headers: { Accept: "image/x-icon" },
                },

                // optional - if saveTo is defined it will save the data fetched to a file
                saveTo: `${__dirname}/src/images/favicon.ico`,

                // optional - if false graphql nodes will not be created for this type
                createNodes: false,
            },
        },

        // use a function instead of string for the url (thanks @michaelpumo)
        {
            resolve: `gatsby-source-fetch`
            options: {
                name: `brands`,
                type: `brands`,

                url: async () => {
                    const api = await Prismic.getApi("https://my-website.prismic.io/api/v2")
                    const brands = await api.getSingle("brands")
                    const { url } = brands.data.summary
                    return url
                },
                method: `get`,
                axiosConfig: {
                headers: { Accept: "text/csv" },
                },
                saveTo: `${__dirname}/src/data/brands-summary.csv`,
                createNodes: false,
            },
        },
    ],
};

graphql

const { footer } = useStaticQuery(graphql`
    {
        footer {
            html
        }
    }
`);