Laravel pagination and Axios await changing response data

Hi,

I am struggling with really strange behaviour. I have simple API which returns classic laravel pagination data with links last page etc.

Problem is when I call this axios call in vuex action like this:

async fetchElasticColoredProducts({ commit, rootGetters, getters }) {

const response = await axios.get(url);

commit("SET_COLORED_PRODUCTS", response.data.colored_products);

return response;
}

And then In my component call this action like this:

const response = await this.$store.dispatch('product-list/fetchElasticColoredProducts', { url: url });

the response value is the same as pagination object from laravel but the last_page attribute is set to undefined for unknown reason. Everything else stays the same but last_page is set to undefined. There is no logic between these steps.

I noticed that when I dont return the response in the action the last_page stays set but then of course I dont have the value that I need later in the code.

JeromeFitzpatrick

2 years ago

Level 8

Hi @rudolfbruder,

Since this is a paginated response. should the commit line read like this instead? commit("SET_COLORED_PRODUCTS", response.data.data);

That is, you first need to access the response's data property, then the data property from the actual returned JSON which should contain (I assume) an array of coloured products.

From what I can see, I think response.data.colored_products would return undefined and perhaps that is causing other issues in the rest of your code.

rudolfbruder

2 years ago

Level 3

@JeromeFitzpatrick well it's no real laravel pagination it's just paginate on eloquent model that is assigned to variable and returned via return response()->json([ 'colored_products' => $coloredProducts]);

I think it's really some deep stuff in js.

Please or to participate in this conversation.