Breaking News: Grepper is joining You.com. Read the official announcement!

Hot to fetch different endpoints in a single loader function

When a Codeddict answers answered on February 27, 2023 Popularity 1/10 Helpfulness 1/10

answer Hot to fetch different endpoints in a single loader function

Hot to fetch different endpoints in a single loader function

Comment

const post = useLoaderData('post')
const comments = useLoaderData('comments')
// put these in the component function body at first!

// define only one loader function per route that fetches both data sources and returns them as an object
export async function postInfoLoader({ params }) {
  const { id } = params
  // use Promise.all to fetch both data sources in parallel
  const [postResponse, commentsResponse] = await Promise.all([
    fetch(ALL_POSTS_URL + id),
    fetch(ALL_COMMENTS_URL + '?postId=' + id), // use a query parameter to filter comments by postId
  ])
  // return an object with post and comments keys
  return {
    post: await postResponse.json(),
    comments: await commentsResponse.json(),
  }
}

// Just a better syntax ==>

const {post, comments} = useLoaderData()
//

export async function postInfoLoader({ params }) {
  const { id } = params;
  const [postResponse, commentsResponse] = await Promise.all([
    fetch(ALL_POSTS_URL + id),
    fetch(ALL_COMMENTS_URL + '?postId=' + id),
  ]);

  const post = await postResponse.json();
  const comments = await commentsResponse.json();

  return { post, comments };
}

Popularity 1/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: endpoints fetch function loader whatever

Link to this answer
Share Copy Link

Contributed on Feb 27 2023

When a Codeddict answers

0 Answers Avg Quality 2/10

Hot to fetch different endpoints in a single loader function

Contents

More Related Answers

Hot to fetch different endpoints in a single loader function

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.