根据条件反应 Apollo 查询

Question

我目前正在构建一个应用程序（混合移动应用程序）来显示记录（地点）列表。以下是我的要求，

1) 如果应用是 online，从服务器获取详细信息。

2) 如果应用是offline，从本地存储获取详细信息。

我可以让每个条件单独工作。但是（我对反应和阿波罗反应还很陌生），我不确定如何向查询添加条件。

下面是我从服务器获取数据的查询示例（我有这部分工作）

const client = new ApolloCient({
  uri: "/graphql"
});

const PLACES_LIST = gql`
  {
    places {
      id
      title
    }
  }
`;

class PlacesList extends React.Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Query query={PLACES_LIST}>
          {({ loading, data }) => {
            if (loading) return "Loading....";
            const { places } = data;
            return places.map(place => (
              <PlaceDetail
                key={place.id}
                place={place}
              ></PlaceDetail>
            ));
          }}
        </Query>
      </ApolloProvider>
    );
  }
}

我想的伪代码是，

if (online) {
  # run apollo client
} else {
  # read from the local storage
}

任何人都可以指出我正确的方向。 TIA.

此外，我使用的是最新版本的 React，如果需要，我可以灵活地使用 React Hooks。

Answer 1

const client = new ApolloCient({
  uri: "/graphql"
});

const PLACES_LIST = gql`
  {
    places {
      id
      title
    }
  }
`;

class PlacesList extends React.Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Query query={PLACES_LIST}>
          {({ loading, data, error }) => {
            // There is also an error parameter from the hook
            if (loading) return "Loading....";
            // Here You can decide if its a connection error or smt other. 
            // I would recoment the fetchPolicy="network-only" prop for your <Query> in this case
            if(error) {
              return localstorage.getItem("Smt");
            } else {
              const { places } = data;
              return places.map(place => (
                <PlaceDetail
                  key={place.id}
                  place={place}
                ></PlaceDetail>
              ));
            }
          }}
        </Query>
      </ApolloProvider>
    );
  }
}

Answer 2

也许您可以尝试使用 the navigator interface 检查网络连接。我不确定 navigator.onLine 是否在混合移动应用程序中可用，但很容易检查。你可以这样做：

render(){
 const isOnline = navigator.onLine
 return (
    <div>
      {isOnline ? (
        <ApolloProvider client={client}></ApolloProvider>
      ) : (
        <LocalStorageComponent />
      )}
    </div>
  );
}

根据条件反应 Apollo 查询

React Apollo Query based on a condition

reactjs

ionic-framework

react-apollo