jhipster / generator-jhipster

JHipster is a development platform to quickly generate, develop, & deploy modern web applications & microservice architectures.
https://www.jhipster.tech
Apache License 2.0
21.53k stars 4.02k forks source link

async/await issue with createAsyncThunk #19133

Open mvarakin opened 2 years ago

mvarakin commented 2 years ago

Shouldn't axios.get... calls use await prefix?

Currently I have typescript linter errors over all the reducers in getEntities and getEntity "Async arrow function has no 'await' expression."

JHipster version used to create the project is 7.8.1

export const getEntities = createAsyncThunk('employee/fetch_entity_list', async ({ page, size, sort }: IQueryParams) => {
  const requestUrl = `${apiUrl}?cacheBuster=${new Date().getTime()}`;
  return axios.get<IEmployee[]>(requestUrl);
});

export const getEntity = createAsyncThunk(
  'employee/fetch_entity',
  async (id: string | number) => {
    const requestUrl = `${apiUrl}/${id}`;
    return axios.get<IEmployee>(requestUrl);
  },
  { serializeError: serializeAxiosError }
);
mshima commented 2 years ago

Please remove async from the arrow function. If there is no await, async is not required. By returning a Promise (async function call) the method is implicitly async.

Can you provide a PR?

mshima commented 2 years ago

https://github.com/jhipster/generator-jhipster/blob/2b98ce8cb2b418ffeb1e4965388d88628767c2b7/generators/entity-client/templates/react/src/main/webapp/app/entities/entity.reducer.ts.ejs#L69

https://github.com/jhipster/generator-jhipster/blob/2b98ce8cb2b418ffeb1e4965388d88628767c2b7/generators/entity-client/templates/react/src/main/webapp/app/entities/entity.reducer.ts.ejs#L80

We can remove others functions warnings by changing. https://github.com/jhipster/generator-jhipster/blob/2b98ce8cb2b418ffeb1e4965388d88628767c2b7/generators/entity-client/templates/react/src/main/webapp/app/entities/entity.reducer.ts.ejs#L90-L97 To

   async (entity: I<%= entityReactName %>, thunkAPI) => {
      const result = await axios.post<I<%= entityReactName %>>(apiUrl, cleanEntity(entity));
<%_ if (!paginationInfiniteScroll) { _%>
     thunkAPI.dispatch(getEntities({})); 
<%_ } _%> 
     return result;
hide212131 commented 1 year ago

I'm considering submitting a PR for this issue, if that's okay? The solution has been almost entirely pointed out by @mshima, so it's not really my contribution, but it has been left unaddressed for a while.

(Creating a test case would require a somewhat forced approach such as checking if the action's content is of the Promise type, so I don't plan to do so.)