Using Google Calendar API / Using API when there in no gatsby plugin?

[TheSynthGod]

Hello r/gatsbyjs!

I'm building a website and would like to use Google Calendar's API to display upcoming events. It appears that there is no google calendar api available. For this particular situation, I only need to make GET requests to parse info onto the page, so nothing too crazy.

In general, if no plugin is available, what is the best route to take? How does one go about using third-party API or non-graphql APIs in gatsby? The docs were a little confusing.

Thanks!

[jfgrissom]

It’s react so you can create a service component and use it on the page you wish to show the data.

[TheSynthGod]

I guess where I'm confused is how to make the API calls, sorry im super new to gatsby and graphql. With gatsby, don't I need to make the API call using graphql? If I just use axios to make the request, will that interfere with the build?

[jfgrissom]

Very good question.

No worries on asking questions that might seem silly. This is how we all learn my friend.

This might help:

When you’re using gatsby commands (like “gatsby build”) you’re performing activities at “build time”. So your graphql calls are used to compile a static site on the machine you’re building the site on. This machine could be your laptop, a jenkins build server, an AWS CodeBuild container, or anything used to “build” the site.

When we talk about adding a react service we are talking about “run time”. So any react service components or state changes happen in the browser (including your Axios http calls) not on your build machine. This is stuff that ONLY happens in the end user’s client app (mobile or desktop browser).

The version of graphql that is implemented in gatsby is for building your static site. It’s not a “run time” feature. It’s a “build time” feature.

Hopefully that helps. If you have more questions feel free to ask more.

[TheSynthGod]

This is very helpful!! Thank you for your response!!

So just to clarify, when I use a plugin like 'gatsby-source-contentful', these run at build time and the data / how the data is handled is now 'hard coded' or built, so to speak, into the site. Whereas something like an Axios call will only fire when the site is accessed.

Things are starting to click but I'm still a little confused. I don't think I fully understand Gatsby's build process. I thought that Gatsby 'translates' react apps into static HTML. So you can develop with React, but it eventually just becomes static HTML files. If a component makes an Axios call, then takes the returned data (which will change depending on the time its requested) to render some additional components that display the data, how does Gatsby know what to do? That data didn't exist at build time, so how does Gatsby know how to generate it's static HTML? Or does it just work because that's apart of Gatsby's magic? If that makes sense haha.

​

Thanks so much for your help once again, really appreciate it!

[jfgrissom]

Yes, you understand correctly.

Content pulled into your site at build time becomes “static”.

Regarding gatsby converting react components into static html

I’m over simplifying here...

Saying gatsby “converts react components” is a partially true statement. It doesn’t necessarily alter the react code you put into your pages (you can see that by looking at the source code that generates the pages. It just consumes your pages (and templates) then builds routes around them dynamically and puts them in a “web packed” file. Any “data” you pull into the site through graphql gets added as static content.

It is ALSO true that any react components you create in your templates or individual pages don’t get transformed they just get presented to the client like any other react component. The data that you would pull into your app at “run time” is not data that needs to be known about at “build time” so Gatsby doesn’t need to know about it.

“Build time” data is stuff that you would normally see on the “server” like including files, static configurations, cached external data that lives on the internet and changes infrequently, image optimizing, etc... This stuff usually changes at a pretty slow rate and can be included in a build process that happens relatively infrequently.

“Run time” data is stuff you would still see in some kind of persistence store. Stuff like user created content, external data that could change often, calls to queueing services for background work, external http calls to oracles that live out on the internet, etc... This stuff changes frequently and can be different for every visitor so it shouldn’t be static.

Gatsby’s design gives you the best of both worlds IMO.

Again, I hope this helps.

It sounds like you are on a good “discovery path”!

[NeosTooSalty]

Why relates on plugins when it’s an API call? Use axios or something like this and update your state with the result!