5

React アプリケーションで apollo クライアントを使い始めたばかりで、キャッシュに行き詰まっています。製品の ID と名前を取得するためのクエリを実行する製品のリストを含むホームページと、ID、名前、説明、および画像のクエリを実行する製品ページがあります。

ユーザーが最初にホームページにアクセスしてから特定の製品ページにアクセスして、その製品の説明と画像のクエリのみを実行し、読み込み中に名前も表示することを望みます (既にキャッシュしておく必要があるため)。ドキュメントの「ストアの制御」の部分（http://dev.apollodata.com/react/cache-updates.html）に従いましたが、それでも解決できませんでした。

製品ページに移動したときに実行されるクエリは、製品の ID と名前の両方を要求しますが、それらは既に要求しているため、キャッシュする必要があります。

私は何かが欠けていると思いますが、それを理解することはできません。コードの一部を次に示します。

// Create the apollo graphql client.
const apolloClient = new ApolloClient({
    networkInterface: createNetworkInterface({
        uri: `${process.env.GRAPHQL_ENDPOINT}`
    }),
    queryTransformer: addTypename,
    dataIdFromObject: (result) => {
        if (result.id && result.__typename) {

            console.log(result.id, result.__typename); //can see this on console, seems okey
            return result.__typename + result.id;
        }

        // Make sure to return null if this object doesn't have an ID
        return null;
    },
});

// home page query
// return an array of objects (Product)
export default  graphql(gql`
   query ProductsQuery {
        products {
            id, name
        }
    }
`)(Home);

//product page query
//return an object (Product)
export default graphql(gql`
   query ProductQuery($productId: ID!) {
        product(id: $productId) {
            id, name, description, image
        }
    }
`,{
    options: props => ({ variables: { productId:  props.params.id } }),
    props: ({ data: { loading, product } }) => ({
        loading,
        product,})
})(Product);

そして私のコンソール出力：

コンソール出力

4

2 に答える 2

4

あなたの質問への答えには、実際には2つの部分があります。

  1. クライアントは、これらのクエリがキャッシュ内の同じオブジェクトに解決されることを実際に確認することはできません。これは、これらのクエリのパスが異なるためです。1 つは で始まり、もう 1 つは で始まりproductsますproduct。クライアント側のリゾルバー用のオープンな PRがあり、明示的にクエリを実行していなくても、キャッシュ内の検索場所に関するヒントをクライアントに提供できます。その機能を 1 週間か 2 週間以内に公開する予定です。

  2. クライアント側のリゾルバーを使用しても、Apollo Client は、バージョン 0.5 以降、クエリの差分を行わなくなったため、上記のとおり正確には実行しません。代わりに、すべてのクエリが完全に静的になりました。つまり、クエリが部分的にキャッシュにある場合でも、完全なクエリがサーバーに送信されます。これには、このブログ投稿で説明されている多くの利点があります。

オプションで設定することにより、キャッシュにある部分を最初に表示することができreturnPartialData: trueます。

于 2016-11-04T18:52:57.367 に答える
1

この質問はかなり古いものですが、次を使用してクエリを正しい場所にマップする解決策がありますcacheRedirects

私のプロジェクトには、projectsクエリとクエリがありprojectます。

以下のようなものを作ることができcacheRedirectます：

const client = new ApolloClient({
  uri: "http://localhost:3000/graphql",
  request: async (operation) => {
    const token = await localStorage.getItem('authToken');
    operation.setContext({
      headers: {
        authorization: token
      }
    });
  },
  cacheRedirects: {
    Query: {
      project: (_, { id }, { getCacheKey }) => getCacheKey({ id, __typename: 'Project' })
    }
  }
});

次に、ダッシュボードをロードすると、取得するクエリが 1 つありますprojects。そして、単一のproject. キャッシュから読み取っているため、ネットワーク リクエストは行われません。

キャッシュ リダイレクトに関する完全なドキュメントを読む

于 2020-01-29T13:41:35.810 に答える