2

Graphql エンドポイントを使用して api-platform アプリを構築します。クライアント側では、次のように apollo クライアントを使用してクエリとミューテーションを管理します (vuejs フロントエンドで):

import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'

const httpLink = new HttpLink({
  uri: 'http://localhost:8000/api/graphql'
})

export default new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
  connectToDevTools: true
})

私の vuex ストアでは、次のように使用します。

fetchItems({commit}, options) {
      commit(mutationsTypes.FETCHING_ITEMS);
      client.query({
        query: organismoQueries.SEARCH_ITEMS_QUERY(options),
      }).then((res) => {
        commit(mutationsTypes.FETCHING_ITEMS_SUCCESS, res.data.organismos.edges)
      }).catch(error => console.error(error));
    }

クエリは正常に動作しています。問題は、テーブルの結果をリロードできないことです。同じオプションで同じクエリを再送信すると、graphql エンドポイントは要求されません。テーブルの並べ替えを変更する必要がありますが、すべての組み合わせに達すると、テーブルを再度リロードできません。

クエリにランダムなパラメーターを導入しようとしましたが、サーバーからエラーが発生しました (明らかに)。

同じクエリを再送信して、テーブルをリロードするなどの方法はありますか?

前もって感謝します！

4

1 に答える 1

3

Apollo クライアントは、特定のクエリをサーバーまたはキャッシュからフェッチすることで解決できます。正確な動作は によって決定され、fetchPolicyを呼び出すときに指定できますclient.query。ドキュメントから：

フェッチ ポリシーは、コンポーネントが Apollo データ キャッシュとやり取りする方法を指定できるオプションです。デフォルトでは、コンポーネントは最初にキャッシュから読み取ろうとします。クエリの完全なデータがキャッシュにある場合、Apollo は単にキャッシュからデータを返します。クエリの完全なデータがキャッシュにない場合、Apollo はネットワーク インターフェイスを使用してリクエストを実行します。このオプションを変更すると、この動作を変更できます。

デフォルトのポリシーはcache-firstであり、すでにクエリを 1 回フェッチしているため、以降の の呼び出しでclient.queryはキャッシュされた結果が返されます。キャッシュをバイパスするには、次のような別のポリシーを選択しますnetwork-only。

client.query({
  query: organismoQueries.SEARCH_ITEMS_QUERY(options),
  fetchPolicy: 'network-only',
})

docsfetchPolicyでオプションの詳細を読むことができます。

于 2018-12-24T14:44:53.740 に答える