Question 348718 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I fetch additional data after the page is already rendered with remix?

I’m using a loader to fetch the ids of several resources and the user can select the ids of the ones they would like to load.

I haven’t found a way to pass new arguments to the loader to GET new data after the page is loaded.

Created a Stack Overflow account specifically because of this. Would super appreciate any help!!

I’ve found that remix loaders can only accept request, params, and context.

One possible solution may be passing params through the URL but I’m hoping to find a different solution because I need to be able to pass an array of ids. I also haven’t gotten this solution to work.

Another solution I explored is appending the ids with formState but that wouldn’t reload the page (so the loader wouldn’t make another request with the new params).

Tags:

2

Answers


  1. 0

    fetching additional data after the page has already been rendered is typically done using client-side JavaScript. You can use various methods and APIs for fetching data asynchronously, such as the Fetch API or Axios.

    Here’s a basic example of how you can fetch additional data after the page has rendered in a Remix application using JavaScript:
    // Assuming you have a button with id "fetchDataBtn" in your HTML

    document.getElementById('fetchDataBtn').addEventListener('click', async function() {
try {
// Perform an asynchronous HTTP request to fetch additional data
const response = await fetch('/path/to/your/api/endpoint');
        
if (!response.ok) {
throw new Error('Failed to fetch data');
}
        
// Parse the response as JSON
const data = await response.json();
        
// Do something with the fetched data, such as updating the DOM
console.log(data);
} catch (error) {
console.error('Error fetching data:', error);
}
});

    In this example:

    We select the button element with the id fetchDataBtn.
    We add an event listener to the button for the ‘click’ event.
    When the button is clicked, an asynchronous HTTP request is made to fetch additional data from the specified API endpoint (/path/to/your/api/endpoint).
    Once the data is fetched successfully, it’s parsed as JSON.
    You can then use the fetched data to update the DOM or perform any other actions as needed.
    Make sure to replace /path/to/your/api/endpoint with the actual URL of your API endpoint that provides the additional data you want to fetch.

    Login or Signup to reply.
  2. 0

    With Remix, you can use fetchers (useFetcher). It supports JSON payloads as well as FormData. Since you want to send a payload (your array data) in the body, you’ll want to use the POST method which means you’ll need to create an action function.

    // routes/test.tsx

// actions are for handling POST requests instead of GET (loaders)
export async function action({ request }: ActionFunctionArgs) {
  // get JSON payload
  const { ids } = await request.json()
  
  // process data

  // return a JSON response
  return json({ success: true })
}

export default function Component() {
  const fetcher = useFetcher<typeof action>()

  const handleClick = () => {
    const ids = [1, 2, 3]
    
    // POST JSON payload
    fetcher.submit({ ids }, {
      method: "POST",
      encType: "application/json",
    }) 
  }

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <pre>{JSON.stringify(fetcher.data, null, 2)}</pre>
    </div>
  )
}

    https://remix.run/docs/en/main/hooks/use-fetcher

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search