So, how exactly do you use the data layer?

[atrauzzi]

This is about, about item 3...

I'm coming up to the point where I'd like to be able to get data into my gatsby application in one of the two obvious ways:

• GraphQL from the static payload
• Calling an API at runtime

Is there any chance the documentation will be complete over the next bit or are there any examples I can leverage for both of these scenarios? The GraphQL layer concerns me less as it's the primary focus for gatsby.
I am however curious as to how I can best go about doing data access at runtime for my application, such that I'm also properly triggering react redraws after the data is retrieved and any other operations are complete. That is to say, I suspect there's something needed that addresses the same concern redux-thunk tackles.

[jquense]

Hi @atrauzzi I believe @KyleAMathews is working his way through writing the tutorials for each step. IN the meantime there are a few examples of how to use the GQL data layer. The gatsbygram, hacker news, contentful, and drupal examples (located here) show a rather diverse set of applications and usages of getting data into your site.

In terms of runtime calling, you may be thinking about how it works a bit differently. Gatsby is about creating static sites, e.g. a bunch of html files and javascript that you can just server from a simple webserver (or run locally). What this means generally, is that there is no server to query at runtime, all data needs are figured out and run at compile time and turned into static json files that are required by the site. This works great for getting data into your site, but means that the GQL layer isn't really appropriate for managing runtime state like you might use redux for.

It does get a bit fuzzy though because I know Kyle is thinking about doing pagination and lazy loading chunks of data over time, (though i don't think thats possible right now). Even still in those cases all the data "fetching" is still done ahead of time, but chunked into smaller static bits that can be retrieved lazily.

[atrauzzi]

@jquense - I'm not confused. I'm fully aware that I'm making a static site that will have static data managed by gatsby.

That said, I also want to do server hits from this site as if it was a regular react app. Just because the one paradigm exists doesn't mean all the others are invalidated.

[atrauzzi]

(I want to add separately that it might be worthwhile to start being more careful about how/when you explain to people the nature of gatsby. It's fine to ensure it's clear, but maybe dial down the existential this-is-a-static-site-generator-dude stuff. I've worked with jekyll before, patch me in. I still need to do server hits, so I'm wondering if that's a concern gatsby may prescribe for!)

[jquense]

Sure, sorry i'm not trying to say that it isn't possible, i'm just explaining how it works and the philosophy behind it. Gatsby doesn't provide a server to run, it's data layer is all at compile time. Your site can definitely hit a server and fetch whatever it needs, but Gatbsy doesn't produce a runtime GQL server that you can host and run someplace, its only artifacts are the compiled static site.

[jquense]

I'm also not trying to imply anything about what you know or don't know. My explanation was an attempt to make no assumptions about where you are coming from. Please don't take it as a dismissal or attack on your intelligence

[atrauzzi]

FWIW, I'm not expecting a GQL server or anything for runtime. I'm saying I need a way to play nicely with the react redraw cycle and gatsby at the same time. Just doing my homework to make sure I don't sabotage that system by cowboying redux-thunk into my application.

That and the fewer components I need, the better.

[jquense]

Good question, Gatbsy's data fetching bits won't exist in the code at runtime, the queries are all extracted and removed from code. Data is injected at the top layer as plain data when the page component mounts. So at runtime there is no moving parts 👍

[atrauzzi]

Oh, so it doesn't run GQL against the local hive of data?

[jquense]

It does, but not at runtime. Queries are extracted statically from your code and run during the build step. The code that is loaded in a browser is something akin to:

const data = require('./queried-data-for-my-page.json')

render(<MyPage data={data} />)

from a Page component like:

const MyPage = (props) => (
  <div />
)

export const pageQuery = graphql`
  query MyQuery {
    siteMetadata { title }
  }
`

[cr101]

@jquense I'm also trying to wrap my head around how GatsbyJS's data layer really works and whether I could accurately search and filter the data after the build step.
Let's say I was building a Job Board site using WordPress. Would users be able to search for jobs using keywords and also filter the search results?

[atrauzzi]

Wondering if the idea is that you're back into pure react at that point, so it's ultimately your choice.

[atrauzzi]

Closing this one, I think things are a bit more clear now!