rtk-incubator / rtk-query

Data fetching and caching addon for Redux Toolkit
https://redux-toolkit.js.org/rtk-query/overview
MIT License
626 stars 31 forks source link

Invalidates across api #147

Closed ghost closed 3 years ago

ghost commented 3 years ago

Hi,

In basket.ts I have the following api :

export const basketApi = createApi({
    reducerPath: "basketApi",
    baseQuery,
    entityTypes: ["Basket"],
    endpoints: (builder) => ({
        placeOrder: builder.mutation<{ data: any }, any>({
            query: (data) => ({
                mutation: BASKET_ORDER,
                variables: data,
            }),
            invalidates: ["Orders"],
        }),
    }),
});

I'm trying to invalidate orders from orders.ts but I have the following error : Type '"Orders"' is not assignable to type 'EntityDescription<"Basket">'. It would be nice to be able to invalide from others api or maybe it's possible and I'm missing something.

Content of orders.ts file :

export const ordersApi = createApi({
    baseQuery,
    entityTypes: ["Orders"],
    endpoints: (builder) => ({
        getOrders: builder.query<any, void>({
            query: () => ({
                body: ORDERS,
            }),
            provides: ["Orders"],
        }),
    }),
});

and basequery is :

const baseQuery = async ({ body = null, mutation = null, variables = null }, { getState }) => {
    const graphQLClient = new GraphQLClient("https://myGQL.api", {
        headers: {
            Authorization: "JWT " + getState().login.token,
            "Content-Type": "application/json",
        },
    });

    if (body) {
        const result = await graphQLClient.request(body);

        return { data: result };
    }

    if (mutation && variables) {
        const data = await graphQLClient.request(mutation, variables);

        return data;
    }
};

Package.json :

        "@reduxjs/toolkit": "1.5.0",
        "@rtk-incubator/rtk-query": "0.2.0",
...
        "react-redux": "7.2.1",
        "redux-persist": "6.0.0",
        "redux-thunk": "2.3.0",

Thanks for this great alternative to urql/apollo.

phryneas commented 3 years ago

In that case (actually, in almost all cases) you would just have one single api. Only use multiple APIs if they have nothing in common (like one api for the facebook api and one for the twitter api) - if they share data, don't split them.

Note that you can still split up that one api over multiple files by using api.injectEndpoints, see the documentation on code splitting.

ghost commented 3 years ago

Thanks, will use injectEndpoints then.