GraphQL

Tips#

# 获取 Schema
npm install -g graphqurl
gq https://my-graphql-engine.com/v1/graphql --introspect > schema.graphql
gq https://my-graphql-engine.com/v1/graphql -H 'X-Hasura-Admin-Secret: adminsecretkey' --introspect > schema.graphql
gq https://my-graphql-engine.com/v1/graphql --introspect --format json > schema.json
# https://github.com/apollographql/apollo-tooling
# schema.json
npm install -g apollo
apollo schema:download --endpoint https://my-graphql-engine.com/v1/graphql
apollo schema:download --endpoint https://my-graphql-engine.com/v1/graphql --header 'X-Hasura-Admin-Secret: adminsecretkey'

Apollo#

FAQ#

N + 1#

DateTime#

vs REST#

TBD#

http://graphql.org/code/

https://github.com/skevy/graphiql-app Light, Electron-based Wrapper around GraphiQL

https://github.com/apollographql/apollo-server

https://github.com/graphcool/graphql-playground GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collaboration)

docker run -p 5000:5000 postgraphql/postgraphql --connection postgres://POSTGRES_USER:[email protected]_HOST:POSTGRES_PORT/POSTGRES_SCHEMA

https://github.com/chentsulin/awesome-graphql Awesome list of GraphQL & Relay

https://www.graphql.com/ http://graphql.org/learn/best-practices/ GraphQL Best Practices

https://www.apollographql.com/ Apollo provides a universal GraphQL API on top of your existing services, so you can build new application features fast without waiting on backend changes.

https://github.com/facebook/dataloader DataLoader is a generic utility to be used as part of your application's data fetching layer to provide a consistent API over various backends and reduce requests to those backends via batching and caching.

https://blog.datank.ai/graphql-grpc-part-1-54d92a109619 GraphQL & gRPC

apollo/client#

  • ApolloClient
    • 包含 cache 和 link
  • link - 通信层
    • httpLink 最常用
  • cache - 泛化缓存层
  • fetch 策略
    • 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby'
  • WatchQueryFetchPolicy = FetchPolicy | 'cache-and-network'
  • ErrorPolicy = 'none' | 'ignore' | 'all'
  • 注意
    • ⚠️ 不支持 fast refresh、不支持 suspense
      • 开发体验十分糟糕
    • issues 里不少影响使用的问题 - 开发不太活跃
    • apollo 比较大 - bundle 可能 50k+
    • notifyOnNetworkStatusChange 默认关闭
    • errorPolicy 默认 none - runtime error
  • 优势
    • 泛化缓存
    • mutation 自动失效 - 不一定准
    • 数据字段存在不会再次查询 - 比 react query 基于 key 的模式粒度更细
    • devtools - 集成 iql,能直接查询可直观的看到 gql,能看泛化后的缓存数据
  • 个人感受
    • retry 通过 link 实现 - 相对麻烦
    • Devtools
      • 似乎对 hmr/fast refresh 支持不好
      • 无法失效数据 - 数据没有状态概念 - 因为没有单次查询概念
      • 查询要写 displayName - 否则不方便看
  • 参考
    • React Query vs Apollo
      • 劣势
        • Devtools - 非 web 集成 - 使用没有 react query 的方便
        • Lagged Query Data - react query 支持直接返回上次数据 - apollo 3 后添加了 previousData
        • Render Optimization - react query 会优化状态变触发的 rerender - 可以选择性的部分状态从新渲染
        • Auto Garbage Collection
          • apollo 手动 gc
          • react query 因为有 mount 概念,可以自动 gc 不用数据
        • Stale While Revalidate
        • Partial Query Matching
          • react query 有 key 概念,数组可以部分匹配
        • Stale Time 配置
          • apollo 不支持
        • Pre-usage Query/Mutation Configuration - 每次使用独立配置
          • apollo 不支持
        • Window Focus Refetching - 窗口获取焦点自动刷新
        • Suspense - apollo 不支持 - #162
    • GraphQL Concepts Visualized

relay#

global id#