如何在 Relay Modern 的父组件中最好地访问来自 QueryRenderer 的数据？

Question

从下图中可以看出，我使用 react-relay QueryRenderer 渲染弹出框，因为请求很慢，并且我不希望页面的其余部分等待获取事件。

我的问题是在导航中我有一个按钮来显示/隐藏弹出框。该按钮仅应在事件加载后呈现，并且该按钮还需要显示有多少事件的计数。

所以我的问题是如何将事件数据从 QueryRenderer（弹出窗口）传递到父组件（切换按钮）？

我的第一个想法是为事件重用我的 QueryRenderer 并传入 dataFrom={'STORE_ONLY'}，以避免新的 HTTP 请求并改用缓存，但不幸的是，'STORE_ONLY' 不是一个选项......但是......

从https://github.com/relay-tools/relay-hooks/issues/5 看来，store-only 似乎将来会被useQuery 支持，那么这是推荐的解决方案，还是推荐的方法是什么？ facebook 和许多其他应用程序肯定经常有这种需求吗？

Answer 1

您可以使用自定义处理程序和本地架构实现类似 redux 的中继存储。

我会猜测您的查询、组件和字段可能会这样命名，所以不要忘记将其更改为正确的值

在项目的 src 文件夹中的某处创建一个文件 ClientState.client.graphql 以使用客户端状态的新字段扩展您的根查询类型：

// ClientState.client.graphql

type ClientState {
  showToggleButton: Boolean!
  eventsCount: Int
}

extend type Query {
  clientState: ClientState!
}

这将允许您用这样的片段包装切换按钮：

fragment ToggleButton_query on Query {
  clientState {
    showToggleButton
    eventsCount
  }
}

并在父查询中传播这个片段（可能是AppQuery）

然后在您将要获取事件的第二个查询中，添加 @__clientField 指令，为该字段定义自定义句柄：

query EventModal {
  events @__clientField(handle: "eventsData") {
    totalCount
  }
}

为句柄eventsData创建EventsDataHandler：

// EventsDataHandler.js

// update method will be called every time when field with `@__clientField(handle: "eventsData")` is fetched

const EventsDataHandler = {
  update (store, payload) {
    const record = store.get(payload.dataID)

    if (!record) {
      return
    }

    // get "events" from record
    const events = record.getLinkedRecord(payload.fieldKey)

    // get events count and set client state values
    const eventsCount = events.getValue('totalCount')
    const clientState = store.getRoot().getLinkedRecord('clientState')

    clientState.setValue(eventsCount, 'eventsCount')
    clientState.setValue(true, 'showToggleButton')

    // link "events" to record, so the "events" field in EventModal is not undefined
    record.setLinkedRecord(events, payload.handleKey)
  }
}

export default EventsDataHandler

最后要做的是将自定义（和默认）处理程序分配给环境并创建初始化存储值：

// environment.js

import { commitLocalUpdate, ConnectionHandler, Environment, RecordSource, Store, ViewerHandler } from 'relay-runtime'
import EventsDataHandler from './EventsDataHandler'

// ...

const handlerProvider = handle => {
  switch (handle) {
    case 'connection':
      return ConnectionHandler
    case 'viewer':
      return ViewerHandler
    case 'eventsData':
      return EventsDataHandler
    default:
      throw new Error(`Handler for ${handle} not found.`)
  }
}

const environment = new Environment({
  network,
  store,
  handlerProvider
})

// set init client state values
commitLocalUpdate(environment, store => {
  const FIELD_KEY = 'clientState'
  const TYPENAME = 'ClientState'

  const dataID = `client:${FIELD_KEY}`

  const record = store.create(dataID, TYPENAME)

  record.setValue(false, 'showToggleButton')

  // prevent relay from removing client state
  environment.retain({
    dataID,
    variables: {},
    node: { selections: [] }
  })

  store.getRoot().setLinkedRecord(record, FIELD_KEY)
})