Разница между локальными данными и удаленными данными в React с Apollo-link-state

Question

В данный момент я изучаю Apollo-link-state в приложении React Native и пытаюсь выяснить, как работать с состоянием и чем отличается запрос локальных данных от попаданий на мой сервер и какие данные я должен поместить в кеш. По общему мнению, практика должна быть единственным источником истины. Как я правильно понял, в Аполлоне это кеш, где я должен хранить все состояние. Например, в моем приложении данные поступают с сервера, это массив каналов, которые я отображаю в моем компоненте FlatList. Я инициализирую состояние с помощью React-хуков:

  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)

Можете ли вы объяснить мне, пожалуйста:

1. Должен ли я записать эти данные в Appolo-кеш или мне не нужно использовать состояние, если я хочу иметь единственный источник правды в Аполлоне?
2. Какие данные являются локальными? Это то, что данные не хранятся на сервере? Например, у меня есть компонент ActivityIndicator со свойством false или true, и это локальное состояние / данные?
3. Согласно официальным документам нашего запроса или мутации, мы указываем, какие поля только для клиента, с помощью директивы @client. Можете ли вы сказать мне, пожалуйста, этот вид запроса или мутации использует только для локального государства? Они отличаются от бэкэнда или одинаковы? Клиентский запрос и мутация - это как редукторы в Redux?

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>
  )
}