Как предотвратить ненужное повторное получение с помощью Apollo Client useQuery hook?

Question

Я пытаюсь реализовать приложение CRUD, используя Apollo Client, используя следующий JS и безсерверный Framework в качестве бэкэнда GraphQL. Есть ли способ предотвратить ненужное автоматическое повторное получение c во время навигации по приложению с использованием кэша?

Например, я создаю новую запись с мутацией, добавив refetchQueries для обновления sh кеша, но Предполагая, что пользователь переходит к другому представлению и затем возвращается к представлению, используя useQuery ловушку, данные будут извлечены снова, но предполагается, что они уже находятся в кэше.

Вот моя конфигурация ApolloClient:

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

import {default as fetch} from 'isomorphic-unfetch'
import {config} from '~config'
const {IS_SERVER} = config

import {getToken} from '~security'
const token = getToken()
import {setContext} from 'apollo-link-context'

const authLink = setContext((_, {headers}) => {
    return {
      headers: {
        ...headers,
        Authorization: token && `Bearer ${token}`,
      }
    }
})

const httpLink = createHttpLink({
    uri: 'http://localhost:4000/graphql',
    fetch
})

let apolloClient: ApolloClient<NormalizedCacheObject> | null = null
const create = (initialState = {}): ApolloClient<NormalizedCacheObject> => {
  const httpLinkConfig: HttpLink.Options = {
    uri: 'http://localhost:4000/graphql',
    credentials: 'same-origin'
  }
  if (!IS_SERVER) {
    httpLinkConfig.fetch = fetch;
  }
  return new ApolloClient({
    connectToDevTools: !IS_SERVER,
    ssrMode: IS_SERVER,
    link: authLink.concat(httpLink),
    cache: new InMemoryCache().restore(initialState)
  })
}

export const initApollo = (initialState = {}): ApolloClient<NormalizedCacheObject> => {
  if (!IS_SERVER) {
    return create(initialState)
  }
  if (!apolloClient) {
    apolloClient = create(initialState)
  }
  return apolloClient
}

Answer 1

На самом деле я нашел решение этой проблемы после прочтения моего конфигурационного файла.

Вот мой _app.tsx файл:

Я понял, что я рендерил вызов initApollo() в рендере Приложение, которое заканчивало воссозданием клиента Apollo при каждом изменении местоположения.

Прямой импорт client из определения apollo предотвращает воссоздание нового клиента при изменении местоположения.

 // apollo config file
export const client = initApollo()

    import React from 'react'
    import App from 'next/app'
    import {client} from '~apollo'
    import {ApolloProvider} from '@apollo/react-hooks'

    import {Provider} from 'react-redux'
    import {ConnectedRouter} from 'connected-next-router'
    import {store} from '~store'

    interface AppProps {
      ctx: any,
      Component: any
    }

    class Application extends App<AppProps> {
        static async getInitialProps(props: AppProps) {
          const {Component, ctx} = props
          const pageProps = Component.getInitialProps ? await Component.getInitialProps(ctx) : {}
          return {pageProps}
        }
        render = () => {
            const {Component, pageProps} = this.props
            return (
                <ApolloProvider client={client}>
                  <Provider store={store}>
                    <ConnectedRouter>
                      <Component {...pageProps} />
                    </ConnectedRouter>
                  </Provider>
                </ApolloProvider>
            )
        }
    }

    export default Application