Question

因此，我了解到在最新版本的阿波罗中，无法直接在cache-and-network内设置<Query />的fetchPolicy。

那么我如何使以下查询可见，以便可以在其上设置cache-and-network的fetchPolicy？

const Item = props => {
    const { item, urlReferer, client } = props;

    return (

          <Query
            query={ALL_ITEMS_QUERY}
            variables={{
              skip: props.page * perPage - perPage,
            }}
            //fetchPolicy="cache-and-network"
          >
            {({ subscribeToMore, data, error, loading  }) => {
              if (error) return <p>Error: {error.message}</p>;
              return (
                <ItemsListItems
                  loading={loading}
                  data={data}
                  urlReferer={urlReferer}
                  page={props.page}
                  subscribeToNewItems={() =>
                    subscribeToMore({
                      document: ALL_ITEMS_SUBSCRIPTION,
                      variables: {},
                      updateQuery: (prev, { subscriptionData }) => {
                        if (!subscriptionData.data) return prev;

                        const newItem = subscriptionData.data.item.node;
                        const mutationType = subscriptionData.data.item.mutation;

                        if (prev.items.find((item) => item.id === newItem.id)) {
                          return prev;                    
                        }

                        if (mutationType === 'CREATED') {
                          return Object.assign({}, prev, {
                            items: [newItem, ...prev.items]
                          });
                        }
                      }
                    })
                  }
                />
              );
            }}
          </Query>

    );
}

Answer 1

事实证明，<Query />组件使用watchQuery，而我要做的只是设置defaultOptions：

const defaultOptions = {
   watchQuery: { fetchPolicy: 'cache-and-network',
}

ApolloClinet({
   defaultOptions,
})

在我的ApolloClient中。

如何使查询可观察，以便对其应用缓存和网络fetchPolicy？

1 个答案: