datopian / portal.js.bak

🌀 The JS data presentation framework. For a single dataset to a full catalog.
https://portal-78qurbwf9-datopian1.vercel.app/
MIT License
22 stars 2 forks source link

[research] Data Layer: how next.js connects to backends #18

Closed rufuspollock closed 4 years ago

rufuspollock commented 4 years ago

How should we get (meta)data / content? What is the "data layer" for this system?

The content fetching divides into two parts:

graph LR

remote[Remote e.g. CKAN API] --fetchers--> localdb[Local DB Cache]
localdb --common api--> render[Renderer]

Tasks

Analysis (in progress)

Next.js data fetching can be done in two ways:

We want to use the getServersideProps method for our use case. There's a repo with helpful examples to see how data fetching works in Next. https://github.com/vercel/next.js/blob/canary/examples

What we want ...

fetch could use graphql, raw queries it doesn't matter ...

graph TD

external[External Data Source e.g. CKAN or Wordpress]
react[React Component]
page[Rendered Page]

external --fetch--> react
external --fetch --> redux
external --fetch --> store[Store - non redux]
redux--> react
store --graphql--> react

react --render--> page

gatsby ...

graph TD

external[External] --> source[Source plugin]
source --> store[Internal Store - nodes]
store --graphql--> component[Component]
component --render--> page

Inbox (misc)

Inbox on Graphql approach

Summary

Excellent critique of next.js SSR approach: https://en.paqmind.com/blog/ssr-is-not-the-future and recommendations on how to approach (jan 20 2020)

This section of gatsby doc is useful https://www.gatsbyjs.org/docs/graphql-concepts/#why-is-graphql-so-cool

For a more in-depth look, read why Gatsby uses GraphQL.

  • Eliminate frontend data boilerplate — no need to worry about requesting & waiting for data. Just ask for the data you need with a GraphQL query and it’ll show up when you need it
  • Push frontend complexity into queries — many data transformations can be done at build-time within your GraphQL queries
  • It’s the perfect data querying language for the often complex/nested data dependencies of modern applications
  • Improve performance by removing data bloat — GraphQL enables you to select only the data you need, not whatever an API returns
anuveyatsu commented 4 years ago

Hi @rufuspollock should we wait for this to complete before we can start wiring up CKAN API with, e.g., Apollo?

anuveyatsu commented 4 years ago

Closing this since we've implemented #29