CODEWITHSUNDEEP
ajaxreactjsserver-side-renderinggatsby
Łukasz Blaszyński
Łukasz Blaszyński

Reputation: 1565

Gatsby server side rendering ajax/xhr/axios

Is it possible with gatsby to render some external data server side to have prepopulated content when accessing page with browser?

  1. Lets assume i have a public api endpoint like this: http://jsonplaceholder.typicode.com/posts
  2. I want data from such endpoint rendered also server side.

Current behaviour:

  1. Currently when doing axios get calls in my component(constructor or componentDidMount) im able to see data downloaded and rendered fully client side

Expected result

  1. I want to be able to call external data in react component (maybe marking with async/await) to have it rendered after ajax call wil be finished.

I found something regarding graphQL(iam not familiar with it) that it is able to query data also for server side rendering.

But how to achieve my needs using simple text/json response from external endpoint?

Upvotes: 0

Views: 1895

Answers (1)

calcsam
calcsam

Reputation: 301

If a plugin exists to pull data from your source of choice, then you can pull it in and use GraphQL to query it.

https://www.gatsbyjs.org/docs/plugins/

If it doesn't, you'll want to write a plugin to pull data or use the sourceNodes API in your gatsby-node.js file.

https://www.gatsbyjs.org/docs/node-apis/#sourceNodes

Upvotes: 0

Related Questions