RTK Query - Applicable for file download?

[DavidPx]

Hi, I'm converting a small application from Thunks to RTK query. I have one route left, a file download.

I'm using file-saver to perform the final "show the dialog" operation. Here are the guts of my thunk.

await fetch(
		`${baseUri}/foo/download?fileIdentifier=${fileIdentifier}`,
		{
			method: 'GET',
			headers: getHeaders(accessToken),
		},
	)
		.then(checkStatus) // helper method to look at status codes
		.then((res) => {
			// Content-Disposition: attachment; filename=mycoolfile.csv
			if (res.headers.has('Content-Disposition')) {
				const values = res.headers
					.get('Content-Disposition')!
					.split(';')
					.map((x) => x.trim());
				const filenamePairs = values.filter((x) =>
					x.startsWith('filename='),
				);
				if (filenamePairs.length > 0) {
					fileName = filenamePairs[0].split('=')[1];
				}
			}

			return res.blob();
		})
		.then((blob) => {
			saveAs(blob, fileName); // comes from file-saver
		});

I'm wondering if anyone has done this before and has good ideas on what should be returned from the operation, if anything. Where should saveAs be called?

Also, it would not be the end of the world to leave this as a Thunk.. just a bit inconsistent for future developers.

[phryneas]

I think it's probably not the best idea to put a whole file into your redux state, especially when it might stay in the cache for a while.

[SimonGolms]

Came across the same problem today and was able to solve it as follows for an Excel export:

// api.export.js
import { api } from './api';

const getFileNameFromContentDisposition = (contentDisposition) => {
  if (!contentDisposition) {
    return 'export';
  }
  const fileNameIndex = contentDisposition.indexOf('filename="') + 'filename="'.length;
  if (!fileNameIndex) {
    return 'export';
  }
  return contentDisposition.substring(fileNameIndex, contentDisposition.length - 1);
};

const downloadRtkQueryResult = async ({ meta }) => {
  const { response } = meta;
  const fileName = getFileNameFromContentDisposition(response.headers.get('content-disposition'));
  const arrayBuffer = await response.arrayBuffer();
  const blob = new Blob([arrayBuffer], { type: response.headers.get('content-type') });
  saveAs(blob, fileName);
};

const exportApi = api.injectEndpoints({
  endpoints: (builder) => ({
    getExport: builder.query({
      async queryFn({ params }, _queryApi, _extraOptions, fetchWithBQ) {
        const result = await fetchWithBQ({
          url: 'export',
          params: params,
          method: 'GET',
          headers: {
            Accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          },
          responseHandler: () => {}, // skips serialization
        });
        downloadRtkQueryResult(result);
        return result;
      },
    }),
  }),
});

export const { useLazyGetExportQuery } = exportApi;

// ButtonExport.js
...
import { useLazyGetExportQuery } from '../services/api.export';

export const ButtonExport = () => {
  const [getExport, { isFetching }] = useLazyGetExportQuery();

  return (
    <Button
      loading={isFetching}
      onClick={() => {
        getExport({ params: { foo: 'bar' } });
      }}
    >
      Export Excel File
    </Button>
  );
};

[phryneas]

Yes, but as I said, that will put the response into the cache, which you probably do not want to do as it will clog up memory. Better trigger it "classically" as a download from your component and never let it touch your Redux state.

[DavidPx]

Is there an option to not cache the results of a query?

In my case our file downloads require a JWT in the header, I'd hesitate to duplicate that stuff in a thunk just for caching.

[phryneas]

Your queryFn could return { data: undefined }