vana-gql.tsx

import * as React from 'react'
import { UserView } from './components/user'
import gql from 'vana/gql'

// Create a data store with vana.useGraphQL
const data = gql.create({
  ...options,
  queries: {
    users: gql`...`,
  }
})

// Provide your data store to descendants.
const App = gql(data, () => (
  <Child />
))

const Child = () => {
  // The queries are observable!
  const users = gql.useObserved(data, 'users')
  return <>
    {users.map(user => (
      <UserView key={user.id} user={user} />
    ))}
  </>
}

Features

• Built on top of React Suspense
• Reversible optimistic updates for free (thanks to Immer!)
• No more handwritten queries (including mutations!)

Missing pieces

• No request batching
  • Use HTTP/2 instead
• How are queries generated?
• How should caching work?
• How should subscriptions work?
  • Local observables are updated in response to change events
  • An event is sent to the client to identify what caused the change

Note to self: Figure out the new API here.

Things to read

• https://news.ycombinator.com/item?id=9473519
• https://principledgraphql.com/

Things to consider

• https://github.com/chentsulin/awesome-graphql
• https://github.com/FlacheQL/FlacheQL (client-side caching)
• https://github.com/prisma/graphql-request
• https://github.com/timqian/gql-generator
• Be compatible with https://hasura.io