Load JSON file data via server handler

Get Help and Help Others
1

I’m making an app that needs to load JSON file data. I used import on the client-side to load the file. I now want to make it dynamic through an environment variable.

I make a handler on the server-side to load the JSON file. I can make the get call.

import vizJson from '../viz/viz.json'

export const handler = (event, context, callback) => {
  return callback(null, { status: 200, body: vizJson })
}

http://localhost:8911/vizjson

How do I call this handler in the web component? Is there a better to send data from server to client?

2

Could you use the graphql API?

1 Like
3

If you create a function named api/src/functions/vizjson.js and deploy to Netlify it will be available at https://mysite.com/.netlify/functions/vizjson.js Netlify also has a CLI that you can run locally to simulate these function endpoints, but I don’t think it plays nicely with Redwood at this point.

As @phzbox suggested you could make it available at a GraphQL endpoint. See the cookbook article we just posted about using a third party API: https://redwoodjs.com/cookbook/using-a-third-party-api In your case take a look at the server-side version and instead of calling out to another API you’ll just return the JSON from visJson.

2 Likes
4

@rob @phzbox thanks for the suggestion. I’m able to load the JSON file through an environment variable and send the data back to the client-side through graphql. It’s cleaner than using a function handler and netlify.

1 Like
5

I’m not sure I understand what you mean here. Are you setting the Env var == to your json file? If so, you could just add it as a static asset in your “web/public” folder?

1 Like
6

@thedavid I’m working on this application. It’s still fairly early.

It allows user to create data visualization dashboard using JSON files. I use environment variables to feed the custom data file into the application. I can run something like:

VIZ_JSON=viz1.json yarn rw dev

I followed the suggestion and was able to load the JSON file and send to client:

7

Hey @dnprock,

Does this JSON data change at all? If not, you could do this completely in the client side.

1 Like
8

@peterp these JSON files don’t change at runtime. But I need the ability to dynamically load the files. How would I dynamically load them on the client-side?

9

Stick them in the public folder web/public/my-data/<filename.json>

and use fetch in a lifecycle method of a component:

const response = await window.fetch('/my-data/<filename.json>')
const data = await response.json()
1 Like
10

@peterp thanks. That’s a good suggestion. I’m using the environment variable approach for now.