5

I'm new to all mentioned technologies and I'm trying to understand how should I operate in this scenario: I'm trying to fetch a CSV file from an API, once retrieved I want to process it to convert it in a json like object which then I can consume in one of my components. For instance, I want to view this data in a table and perform operations on this data which causes a change of state for that data.

From the documentation there is a transformResponse field for each endpoint defined which I could use to normalize data needed for my application:

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  tagTypes: ['Post'],
  endpoints: (build) => ({
    getPost: build.query<Post, number>({
      // note: an optional `queryFn` may be used in place of `query`
      query: (id) => ({ url: `post/${id}` }),
      // Pick out data and prevent nested properties in a hook or selector
      transformResponse: (response: { data: Post }) => response.data,
      ...

This could work but then I would have some confusion about how I can dispatch actions to change this state.

Another solution would use a Redux Toolkit store slice to save the fetched data and also perform the transform operation and dispatch actions.

Any help would be awesome!

Marco Ripamonti
  • 267
  • 1
  • 3
  • 12

1 Answers1

10

RTK Query state is not meant to be state that is changed locally on the client - RTK Query is a pure cache.

It is meant for a workflow where you

  • fetch data from the server
  • display that data
  • send a request for changes to the server
  • get new data from the server
  • display that data again

The purpose of RTK-Query is to make that process as easy as possible for you and take over stuff like automatic re-fetching after something has been triggered to change on the server and removing old values from the cache.

If you want to keep data locally to do local changes on them, you should be using a traditional slice.

phry
  • 35,762
  • 5
  • 67
  • 81
  • I see, thanks for the explanation. So what would you suggest doing? Normal fetch or axios requests and then use a store slice like you suggested? – Marco Ripamonti Aug 13 '21 at 08:05
  • 1
    If all your other api interactions follow the above pattern, you can use RTK-query and use an `extraReducer` to copy data over into your slice for this one-off. Otherwise, RTK-Query is just not the tool for you and you need to stick to the classic way of normal fetch -> put data into a slice manually. – phry Aug 13 '21 at 09:58
  • @phry what's so great about RTKQ is how it takes all the fetch management out of the way, so although it "wastes" all the other great caching features, it seems like fetching with RTKQ and using the data locally using `extraReducer` is a pretty decent way to set up an application, even if it's not the exact intended use case for RTKQ. – Jonathan Tuzman Oct 25 '21 at 15:10
  • True, but it also now leaves things like "when do I delete this from my slice" 100% up to you again, but makes it more difficult to actually do so in the end. So for copying a little bit over I'd say it's okay, but I wouldn't build a full app on that. – phry Oct 25 '21 at 17:31
  • What is the purpose of a mutation query if you're not supposed to edit something at all? Or am I misunderstanding something about this answer? – Azeirah May 17 '22 at 13:48
  • 1
    @Azeirah You misunderstand the answer. The purpose of a mutation is to edit something **on the server** - and then get the data back from the server by re-firing all related queries. You just never edit anything in the client state, the change comes from the server back to the client automatically. – phry May 17 '22 at 14:07
  • @phry Ahh, thank you. That makes it make a lot more sense. I was getting worried whether rtk-query was the wrong choice for me – Azeirah May 17 '22 at 15:14