使用 React Query 为每个请求附加令牌密钥以请求数据的简单方法

Question

我必须添加一个在登录时创建的令牌，并将 cookie 放入我发出的每个提取请求的请求数据中。我目前正在使用自定义挂钩来完成此操作，该挂钩每次都会添加它，因此我不必多次添加它。有没有更简单的方法？也许使用 axios？

这是我的自定义挂钩：

import { useQuery as useBaseQuery } from 'react-query';
import axios from 'axios';


const fetcher = async (url, options) => {
  const token = Cookies.get('TOKEN');

  const { data } = await axios.get(url, {
    data: { ...options, 'TOKEN': token },
  });

  return data;
};

const useQuery = (queryKey, query, options) => {
  return useBaseQuery(queryKey, async () => {
    return await fetcher(query, options);
  });
};

export default useQuery;

并且是这样使用的：


import useQuery from './useBaseQuery';

const requestData = {
  method: 'GET',
  path: pathToUrl,
};

export default function useGetActionAlerts() {
  return useQuery('actionAlerts', '/bin/user', requestData);
}

Answer 1

您需要使用文档中的拦截器

You can intercept requests or responses before they are handled by then or catch.

https://axios-http.com/docs/interceptors

使用 React Query 为每个请求附加令牌密钥以请求数据的简单方法

Easy way to append token key to request data for every request with React Query

reactjs

axios

react-query