Question

目前，我正在 React Native 应用程序上研究 Apollo-link-state ，我正在尝试弄清楚如何使用状态，有什么区别从命中我的服务器请求本地数据到应将哪些数据放入缓存之间。通常，实践必须是真理的来源之一。我如何正确理解 Apollo ，这是我应该保留所有状态的缓存。例如，在我的应用程序中，数据来自服务器，它是我在 FlatList 组件中呈现的通道数组。我用 React-hooks 初始化状态：

  const [channels, setChannels] = useState(null)

我的 GraphQL 查询：

  const CHANNELS = query Channels {
    channels {
      id
      createdAt
      title
      cover
      topics {
        id
        title
        createdAt
      }
    }
  }

使用 Apollo-hooks 调用它，并从服务器获取数据并将其写入状态：

  const { data, error, loading } = useQuery(CHANNELS)

能请你解释一下吗？

如果我想在 Apollo 中使用单个真相源，我应该将此数据写入 Appolo-cache 还是不需要使用State？
哪些数据是本地数据？数据没有保存在服务器上吗？例如，我有一个具有错误或true属性的 ActivityIndicator 组件，它是本地状态/数据吗？
根据我们的查询或变更的正式文档，我们使用 @client 指令指定哪些字段仅用于客户。您能告诉我这种查询或变异仅用于本地状态吗？它们与后端不同还是相同？客户端查询和变异就像 Redux 中的reducers吗？

const ChannelsScreen = ({ navigation }) => {
  const [channels, setChannels] = useState(null)
  const { data, error, loading } = useQuery(CHANNELS)


  const flatList = (hookData, hookError, hookLoading) => {
    if (hookLoading) {
      return <ActivityIndicator size="small" animating={true} />
    }
    if (hookError) {
      return <Text>Error! {error.message}</Text>
    }

    return (
      <View style={{ alignItems: 'center' }}>
        <FlatList
          autoCorrect={false}
          data={hookData.channels}
          keyboardShouldPersistTaps="always"
          keyboardDismissMode="on-drag"
          keyExtractor={item => item.cover}
          numColumns={2}
          renderItem={({ item }) => (
            <ChannelItem
              channelItemHeader={item.title}
              imageSource={item.cover}
              onPress={() => navigation.navigate(TOPICS_SCREEN)}
            />
          )}
        />
      </View>
    )
  }

  return (
    <View style={container}>
      <ScreenHeader
        header="Channels"
        leftIconName="ios-log-out"
        rightIconName="ios-add"
        onLeftIconPress={showActionSheet}
        onRightIconPress={rightIconPressHandler}
      />
      <SearchBar
        isEmpty={userInput.isEmpty}
        onChangeText={changeTextHandler}
        onPressXButton={pressXButtonHandler}
        placeholder="Search channel..."
        value={userInput.value}
      />
      {flatList(data, error, loading)}
    </View>
  )
}

React with Apollo-link-state中本地数据和远程数据之间的差异

0 个答案: