CODEWITHSUNDEEP
reactjsperformanceasynchronousgatsby
sam creasey
sam creasey

Reputation: 49

Gatsby: Fetching json file after initial page load

I'm building my first PWA with Gatsby. I have a 3mb json file with an array of objects. The function of this app is that you can search the json file for two objects (by either their name or a matching alias) and retrieve all data about both objects. This app is only running on a single URL endpoint and when loading I am downloading the entire json file immediately by querying all fields with

export const example = graphql`
  allDataJson{
    ...examplesubCategories
  }`

and accessing the data through the data-prop passed to the component through this query.

const fullInfo = data.allDataJson.edges[0].node.example

I felt that fetching the data in useEffect once the home page had mounted would make the most sense, and I could display a loading spinner while that happened.

My two questions are

1: Is there a way to fetch this data from the component when deployed as it is not in a database and instead stored in src/data/example.json? (If not is there an alternative to remove the json file from the initial page fetch)

2: Currently once the bundle has downloaded the entire app is available offline as a PWA, If there was a way to achieve Q1 would this data automatically be saved with gatsby's default offline-plugin settings or would I have to manually cache this data to make the app available offline.

A live version of this is available at https://tripmix.netlify.app/ if it helps to see.

Upvotes: 0

Views: 1055

Answers (1)

coreyward
coreyward

Reputation: 80041

Move the file to static/data/example.json. On build, Gatsby will copy the contents of the static folder to public, making this file available at /static/data/example.json. Then you can just issue a fetch to that URL to fetch the data client-side.

You shouldn't have any issues adding this URL to the precachePages option in the gatsby-plugin-offline configuration (docs), though if you set up your HTTP headers to cache this file for a long duration it's not strictly necessary.

Upvotes: 1

Related Questions