服务看不到 Redux RTK 请求正文

Question

我正在尝试使用 Redux 的 RTK 构建一个小型 Pokemon 应用程序。

在应用程序中，我想通过使用

pokemonID

将

"POST" method

发送到端点，将神奇宝贝添加到我的图鉴。当我使用 RTK 时，我可以很好地看到网络负载，但在服务上，

req.body

为空。

如果我在 Thunder 客户端中执行完全相同的操作，它就可以正常工作......

我不知道为什么

pokemonId

在RTK的

req.body

中丢失了...

有效负载：

{pokemonId: 2}

用途：

    const [addToPokedex, { isLoading }] = useAddToPokedexMutation();

    function handleClick() {
        addToPokedex(pokemon.id);
    }

RTK PokeAPI：

export const pokedexApiSlice = createApi({
    reducerPath: 'pokedex',
    baseQuery: fetchBaseQuery({
        baseUrl: `${endpoint}`,
        prepareHeaders(headers) {
            headers.set("Access-Control-Allow-Origin", react_app_domain);
            headers.set("Authorization", cookies.get('Authorization'));
            return headers;
        }
    }),
    tagTypes: ['pokedex'],
    endpoints(builder) {
        return {
            fetchPokedex: builder.query<PokemonApiResponse, void>({
                query() {
                    return '/list'
                },
                providesTags: ["pokedex"]
            }),
            addToPokedex: builder.mutation<PokemonApiResponse, number>({
                query: pokemonId => ({
                    url: '/catch',
                    method: 'POST',
                    body: JSON.stringify({ pokemonId })
                }),
                invalidatesTags: ["pokedex"]
            }),
            removeFromPokedex: builder.mutation<PokemonApiResponse, number>({
                query: pokemonId => ({
                    url: `/release/${pokemonId}`,
                    method: 'DELETE',
                }),
                invalidatesTags: ["pokedex"]
            })
        }
    }
})


export const {
    useFetchPokedexQuery,
    useAddToPokedexMutation,
    useRemoveFromPokedexMutation
} = pokedexApiSlice;

端点控制器：

export const addToPokedex = asyncHandler(async (req: Request, res: Response): Promise<PokedexResponse> => {

    const { pokemonId } = req.body;
    const { userId } = res.locals;

    console.log("CATCH!")
    console.log(req.body)

    try {

        const pokedex: Pokedex = await PokedexModel.findOneAndUpdate(
            { userId: userId },
            { $push: { pokemons: pokemonId } },
            { new: true, upsert: true }
        );

        return res.status(200).send({
            success: true,
            pokemons: pokedex.pokemons || []
        })
    }
    catch (err: any) {
        return res.status(500).send({
            success: false,
            message: err.message,
            pokemons: []
        })
    }
});

Answer 1

必须将

body

更改为简单的对象。不需要

JSON.stringify()

。

不幸的是，使用时它不会抛出任何错误

JSON.stringify()

...

  addToPokedex: builder.mutation<PokemonApiResponse, number>({
                query: pokemonId => ({
                    url: '/catch',
                    method: 'POST',
--                  body: JSON.stringify({ pokemonId })
++                  body: { pokemonId }
                }),
                invalidatesTags: ["pokedex"]
            }),