Fetch hook based on router params doesn't work on page refresh

Question

I fetch property data through params. In this property data are ID's of agents located. So, after successfully fetching the property data, I want to fetch the agents data through the just received ID's. The problem, if I manually refresh the page, the agent data isn't fetching. If I enter the page through the app navigation, it will.

Why is that? Or do I have to change something in the structure of how I fetch the data?

async fetch() {
  try {
    const property = await this.$axios.$get(
      `/api/get-specific-property/${this.$route.params.id}`
    )

    if (property.success) {
      this.property = property.data

      const agentIDs = property.data.agents
      this.getAgents(agentIDs)
    }
  } catch (err) {
    console.log(err)
  }
},

methods: {
  async getAgents(agentIDs) {
    try {
      const agents = await this.$axios.$post('/api/get-specific-agents', agentIDs)

      if(agents.success) {
        this.agents = agents.data
      }
    } catch(err) {
      console.log(err)
    }
  }
}

The given code should be working fine even on a page reload. Do you have any error in your console or some strange state in your Vue devtools? — kissu, Oct 17 '22 at 10:53
You could try `await this.getAgents(agentIDs)`, not sure if it helps in your case. Which code is not working, the method or the lifecycle? You're using SSG/SSR I guess. `fetch` behaves well with this setup usually. — kissu, Oct 17 '22 at 11:07
That solves the problem...thanks! The method did not work and I'm using SSR. — PhilippeUn, Oct 17 '22 at 11:11

score 2 · Accepted Answer · answered Oct 17 '22 at 11:14

2

You should probably await your method with the following

await this.getAgents(agentIDs)

The rest looks fine!

answered Oct 17 '22 at 11:14

kissu

40,416
14
65
133

score 1 · Answer 2 · answered Oct 17 '22 at 15:56

1

Using SSR fetch() is run by default on serverSide

if You specify fetchOnServer: false then it's only happening on clientSide

@PhilippeUn it could be cleaner to use async/await syntax instead of try/catch. But for sure easier to resolve the both of APIs call in fetch hook. (Then always You can use this.$fetch() and it'll re-run the hook.)

it allows to use the $fetchState.error/pending state
Just a hint to stop using console.log for error, try to use console.error as it makes trace of the errors.

But my main concern is that there's used $POST method to GET data? Use GET for requesting data

I understand that by POST You can use BODY in the request but it makes a lot of risks for the backend.

answered Oct 17 '22 at 15:56

devzom

676
1
9
19

By default, it runs on both server and client side. As for the POST, maybe OP is using some 3rd party API and you don't always have a choice for those. – kissu Oct 18 '22 at 07:38
Yes, thanks for correcting me. ;) About the API, ofc it depends but looks that's their endpoint, it's the same one, so for sure it break the SRP rule. : – devzom Oct 18 '22 at 08:13
Hello! I'm always interested in improving my workflow. Can you show me an example without try, catch or how you would do it? I think I'm not using a 3rd party API - what would be a 3rd party API for example? Where can I read through? How can I send my data to the backend without POST? What are the risks with my current approach? – PhilippeUn Oct 18 '22 at 10:30
That's nice. :) The case here is that GET method should be used to request data from backend. They way You're doing here is that You're sending `agentsIds` by POST with Body to the backend to request agentsData, where POST is supposed to modify smth. You should follow best API principles and start requesting data by GET, using queryParams as agentsIds Array which backend can read so example: `'/api/get-specific-agents?ids=1,2,3,4,5,6'` . Backend should resolve it and send back the agentsData. Look here https://stackoverflow.com/questions/6243051/how-to-pass-an-array-within-a-query-string – devzom Oct 18 '22 at 12:06
The second topic is that API statusCode should be used as information about `success` in any of the http requests. So then You don't have to check smth like `if (property.success) { ... }` because for ex. statusCode `404` will pass the info that the requested resource is not found. – devzom Oct 18 '22 at 12:09
I would like to recommend to read: https://www.freecodecamp.org/news/rest-api-best-practices-rest-endpoint-design-examples/ & https://stackoverflow.blog/2020/03/02/best-practices-for-rest-api-design/ :) – devzom Oct 18 '22 at 12:14
As You're using SSR I've thought You want to make it render on server, so here is short example how I'll do it, but ofc -> don't have access the the API & etc so cannot fully check it ;) just an example (with `$fetchState` statuses): https://stackblitz.com/edit/nuxt-starter-wftpkp?file=pages/index.vue – devzom Oct 18 '22 at 12:27
Thanks for all that new stuff! I will give it a try and implement it. Looks great! – PhilippeUn Oct 18 '22 at 13:01

Fetch hook based on router params doesn't work on page refresh

2 Answers2