web-dev-qa-db-ja.com

react-apolloでデータキャッシュを強制的に更新するにはどうすればよいですか？

データがreact-apolloによって提供されているページに再度アクセスしたときに、新しいデータをrefetchする方法は？

たとえば、私は初めてリストページにアクセスします。 apolloはクエリをフェッチし、デフォルトでキャッシュします。そのため、セッション中に同じページに再度アクセスすると、キャッシュストアからデータが入力されます。コンポーネントがマウントされるたびにapolloにデータを再フェッチさせるにはどうすればよいですか？

reactjsgraphqlapolloreact-apollo
7
Pranesh Ravi

apolloの-​​ fetchPolicy を使用できます。これに基づいて、クエリを実行するかどうかを決定しますもう一度。

例：

const graphQLOptions = {
  name: 'g_schemas',
  options: (props) => {
    return {
      variables: {
        name: props.name,
      },
      fetchPolicy: 'cache-and-network',
    }
  },
}

それが役に立てば幸い。

8
Pranesh Ravi

Praneshの答えに加えて：あなたが探しているfetchPolicyはnetwork-only。

8
Ricardo Portugal

react-apolloのクエリコンポーネントを使用している場合、次に例を示します。

import { Query } from "react-apollo";

その小道具を介してfetchPolicyを適用できます。以下の例を参照してください。

import gql from 'graphql-tag';
import React from 'react';
import { Query } from 'react-apollo';

const CounterView = ({ counter }) => (
  <div>{counter}</div>
);

const GET_COUNTER = gql`
  {
    counter
  }
`;

const Counter = () => (
  <Query query={GET_COUNTER} fetchPolicy={'network-only'}>
    {({ data }) => {
      return <CounterView {...data} />;
    }}
  </Query>
);

export default Counter;

参照：

3
Yuci