npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@proscom/prostore-axios-react

v0.2.12

Published

Adapter for prostore-react and axios. Provides hooks to subscribe components to axios queries

Downloads

64

Readme

prostore-axios-react

Адаптер для prostore , связывающий prostore-axios и prostore-react.

Позволяет реактивно подключать результат HTTP запроса в React-компоненты.

Содержит две полезных фичи:

  • AxiosClientsContext - прокидывание клиента Apollo через контекст
  • useAxiosQuery - хук, который динамически создаёт AxiosQueryStore в соответствии с переданными параметрами и подписывает на него компонент.

AxiosClientsContext

Позволяет прокидывать клиент axios через контекст реакта. Таким образом реализуется принцип Dependency Injection, и снижается связанность кода.

// index.tsx
import axios from 'axios';
import {
  AxiosClientsContext,
  AxiosClientsManager
} from '@proscom/prostore-apollo-react';
import { App } from './App';

const defaultClient = axios.create();
const specificClient = axios.create({
  /* ... */
});

const axiosContext = new AxiosClientsManager({
  default: axiosClient,
  specific: axiosClient2
});

const rootElement = document.getElementById('root');

ReactDOM.render(
  <AxiosClientsContext.Provider value={axiosContext}>
    <App />
  </AxiosClientsContext.Provider>,
  rootElement
);
// App.ts
function App() {
  const defaultClient = useContextAxiosClient();
  const specificClient = useContextAxiosClient('specific');

  // defaultClient === axiosClient
  // specificClient === axiosClient2

  // ...
}

useAxiosQuery

Этот хук динамически создает стор AxiosQueryStore и подписывают компонент на этот стор с помощью useRequestStore . Параметры, переданные в queryOptions, передаются в конструктор AxiosQueryStore.

Данный хук позволяет компоненту при маунте выполнить HTTP-запрос с помощью axios, и перерендерить компонент при получении результата. Запрос будет автоматически перевыполнен, если компонент перерендерится с измененными переменными запроса.

// Статические параметры запроса
const query: AxiosRequestConfig = {
  url: '/api/user',
  method: 'get'
};

// Динамические параметры запроса
interface UserQueryVars {
  id: number;
}

// Результат запроса
interface UserQueryData {
  name: string;
}

// Это по-сути аргумент конструктора AxiosQueryStore
// должен быть за пределами компонента (или в useMemo),
// чтобы сохранять ссылочную постоянность, т.к. стор
// будет пересоздаваться при каждом изменении queryOptions
const queryOptions: IAxiosQueryStoreParams<UserQueryVars, UserQueryData> = {
  // Параметры запроса, которые передаются в axios и не зависят от variables
  query,
  // Преобразовывает результат запроса в UserQueryData
  mapData: (result) => result.data,
  // Преобразовывает UserQueryVars в AxiosRequestConfig.
  // Если не задана, то преобразования не происходит и в качестве variables
  // необходимо передавать AxiosRequestConfig
  mapVariables: (params) => ({ params }),
  // Позволяет не выполнять запрос в зависимости от значений variables.
  // Здесь, если variables === null, то запрос не выполняется и data === null
  skipQuery: skipIfNull(null)
};

function UserInfo({ id }) {
  const userQuery = useAxiosQuery({
    queryOptions,
    // Сравниваются глубоко с помощью lodash.isEqual
    // если меняются, то запрос сам перевыполняется
    variables: { id },
    // Можно передать конкретный клиент Apollo, либо его ключ,
    // тогда он будет подключен из контекста
    client,
    // Дополнительные опции передаются в AxiosQueryStore.loadData
    options
  });
  const userData = userQuery.state.data;

  // С userQuery можно работать точно так же, как
  // с результатом вызова хука useRequestStore

  if (userQuery.check.spinner) {
    return <Spinner />;
  } else if (userQuery.check.error) {
    return <ErrorMessage error={userQuery.state.error} />;
  } else if (!userData) {
    return <ErrorMessage error={'Пользователь не найден'} />;
  }

  return <div>{userData.name}</div>;
}

Так как useAxiosQuery создаёт стор внутри компонента, то при ремаунте компонента стор будет создан заново. Это приводит к повторным запросам на бекенд, поэтому рекомендуется использовать какой-нибудь кеш, например axios-cache-adapter.

Мутации

Хук useAxiosQuery представляет собой реактивную зависимость результата запроса от переменных (параметров запроса). Это значит, что момент выполнения запроса определяется автоматически. Такая семантика подходит только запросов, удовлетворяющим свойствам чистой функции, например для GET HTTP запросов, возвращающих одни и те же значения для одних и тех же переменных и не выполняющим побочных эффектов

Мутирующие запросы (POST HTTP) следует вызывать в коде императивно в нужный момент (например, в ответ на клик пользователя по кнопке) с помощью функций axios. Мутирующий запрос может не оказывать никакого влияния на состояние компонентов, тогда его можно вызывать просто напрямую без использования хуков из этой библиотеки.

Если же возникает потребность отслеживать статус выполнения мутирующего запроса, то для этого можно использовать хук useAsyncOperation из @proscom/prostore-react:

import { useAsyncOperation } from '@proscom/prostore-react';
import { useContextAxiosClient } from './AxiosClientsContext';

function MyComponent() {
  const client = useContextAxiosClient();
  const saveOp = useAsyncOperation(
    () => {
      // Чтобы корректно отследить статус завершения операции,
      // колбек должен возвращать промис
      return client.post('/save', data).catch((e) => console.error(e));

      // То, как обрабатывать ошибку следует решить на уровне конкретного проекта.
      // Рекомендуется отобразить пользователю toast или текст ошибки рядом с кнопкой действия.
    },
    {
      // После завершения операции ставит finished=true на 5 секунд
      // Передайте Infinity, чтобы поставить finished=true навсегда после первого выполнения операции
      finishedTimeout: 5000,
      // Предотвращает повторный вызов операции до завершения предыдущей
      singleton: true
    }
  );

  const {
    // Функция для вызова операции
    run,
    // true, если операция выполняется
    loading,
    // true, если операция недавно завершена
    finished,
    // позволяет поменять значение finished в сложных случаях
    setFinished
  } = saveOp;

  return (
    <button onClick={run} disabled={loading}>
      {finished ? 'Saved' : loading ? 'Saving...' : 'Save'}
    </button>
  );
}

См. пример в CodeSandbox

Примеры использования

Создание axios-клиента с автоповтором запросов при ошибке сети и кешем

import axios from 'axios';
import axiosRetry from 'axios-retry';
import { setupCache } from 'axios-cache-adapter';

const clientCache = setupCache({
  // Время жизни в кеше - 10 минут
  maxAge: 10 * 60 * 1000,
  // Задаем лимит количества сохраненных записей в кеше, чтобы вся память не съедалась
  limit: 100 as any, // Тут проблема с типами в библиотеке
  exclude: {
    // Кешируем запросы вместе с квери-параметрами
    query: false
  }
});

export const defaultClient = axios.create({
  // Используем кеширующий адаптер
  adapter: clientCache.adapter
});

// Повторяем запросы при ошибке сети до тех пор, пока она не исчезнет
axiosRetry(defaultClient, {
  // Бесконечное количество повторов
  retries: Infinity,
  // Повторный запрос через 5 секунд
  retryDelay: () => 5000
});

При использовании кеша может потребоваться удалить какое-нибудь значение из кеша. Для этого можно использовать следующий код:

import { serializeQuery } from 'axios-cache-adapter';

function clearQueryFromCache(url) {
  clientCache.store.iterate((value, key) => {
    if (key.startsWith(url)) {
      clientCache.store.removeItem(key);
    }
  });
}

clearQueryFromCache('/api/user');
// todo добавить поддержку query-параметров в clearQueryFromCache

Также можно вызвать запрос с инвалидацией кеша, передав ignoreCache: true в options:

function UserInfo({ id }) {
  const userQuery = useAxiosQuery({
    /* ... */
  });

  const reloadData = () => {
    userQuery.load({ ignoreCache: true });
  };
}

Можно совместить инвалидацию кеша с шиной событий. Для разрешения наибольшего количества ситуаций рекомендуется и сбрасывать кеш вручную, и вызывать запрос заново:

const EVENT_USER_RELOAD = 'EVENT_USER_RELOAD';

storeEvents$.subscribe((event) => {
  if (event.type === EVENT_USER_RELOAD) {
    clearQueryFromCache('/api/user');
  }
});

function UserInfo({ id }) {
  const userQuery = useAxiosQuery({ params: { id } /* ... */ });

  const reloadData = () => {
    userQuery.load({ ignoreCache: true });
  };

  useObservable(storeEvents$, (event) => {
    if (event.type === EVENT_USER_RELOAD && id === event.id) {
      reloadData();
    }
  });

  return <div>...</div>;
}

function UserReload({ id }) {
  const handleClick = () => {
    storeEvents$.next({ type: EVENT_USER_RELOAD, id });
  };
  return <button onClick={handleClick}>Reload</button>;
}

Пагинация с дозагрузкой

В случаях когда нужна пагинация с дозагрузкой (например, бесконечный скролл с дозагрузкой) можно использовать функцию updateData.

Пример:

import {
  AxiosQueryStore,
  IAxiosQueryStoreParams
} from '@proscom/prostore-axios';

interface NewsQueryVars {
  page?: number;
  perPage?: number;
}

interface NewsItem {
  name: string;
}

type NewsQueryData = NewsItem[];

const queryOptions: IAxiosQueryStoreParams<NewsQueryVars, NewsQueryData> = {
  query: {
    url: '/news',
    method: 'get'
  },
  // Берем старые данные и соединяем с новыми в один большой массив
  updateData: (data, oldData, params) => {
    const page = params.variables.page;
    const perPage = params.variables.perPage;
    return [
      ...oldData?.slice(0, page * perPage),
      ...data,
      ...oldData?.slice((page + 1) * perPage)
    ];
  },
  mapVariables: AxiosQueryStore.mapVariablesParams
};

function MyComponent() {
  const [page, setPage] = useState(0);

  const query = useAxiosQuery({
    queryOptions,
    variables: {
      page,
      perPage: 10
    }
  });

  const handleLoadMore = () => {
    setPage((p) => p + 1);
  };

  // Не обязательно использовать query.check для определения того,
  // что рендерить. Можно создать свою комбинацию условий на основе
  // query.state

  return (
    <div>
      {query.state.data?.map((item, iItem) => {
        return <div key={iItem}>{item.name}</div>;
      })}
      {query.state.error && 'Error: ' + query.state.error}
      {query.state.loading ? (
        'Loading...'
      ) : (
        <button onClick={handleLoadMore}>Load More</button>
      )}
    </div>
  );
}

См. пример в CodeSandbox