No data is being retrieved by SWR

Question

No data is being retrieved by SWR

I'm struggling to make SWR work in my code. Despite trying multiple examples, I can't seem to get it functioning properly. It's frustrating because the code looks fine and should work. I feel like I must be missing something simple.

Currently, I am working with a basic next.js app template.

In my index.js file, I have the following setup;

import useSWR from 'swr'

export default function Home({ isConnected }) {
  const { data, error } = useSWR('/api/')
  return() //jsx here
}

When I start the development server, it notifies me that I can view the site at http://localhost:3000. However, when I debug and pause on the return line, both data and error variables are coming back as undefined. If I visit http://localhost:3000/api/, I do receive well-formatted JSON data (interpreted as such by Firefox).

javascript next.js swr

Answer 1

Answer №1

In order to send the request, you'll need a specific method for your situation. Here's an example:

import useSWR from 'swr'
import axios from 'axios';

export default function Homepage({ connected }) {
  const fetcher = async () => {
     return await axios.get('http://mypage/some/');
  };
  const { data, error } = useSWR('/api/', fetcher)
  return() //jsx here
}

Answer 2

In order to send the request, you'll need a specific method for your situation. Here's an example:

import useSWR from 'swr'
import axios from 'axios';

export default function Homepage({ connected }) {
  const fetcher = async () => {
     return await axios.get('http://mypage/some/');
  };
  const { data, error } = useSWR('/api/', fetcher)
  return() //jsx here
}

No data is being retrieved by SWR

Answer №1

Similar questions

Preventing the selection of 'None selected' upon dropdown change

Adjust the background of the page at regular intervals

Ways to display a different div when clicking on a div?

Utilizing Local Storage in Vuex Store with Vue.js

Striving to implement a dynamic dropdown menu using React's <select> element and rendering users from an array as selectable options

Automatically refresh the browser upon changes in file content, utilizing Node.js for saving

Invoking a class method through a dynamic function call with the use of setTimeout

Utilize Angular to Transfer HTTP Array Data from a Service to a Component

Is Angular UI's data binding more of a push or pull mechanism? How can I optimize its speed?

Transmitting HTTP headers using Node.js

Using vanilla JavaScript to close a modal in Bootstrap 5 is a great way

Save to a JSON file

Add an array into another array using a for loop, with the first result being duplicated

Send a quick message with temporary headers using Express Post

Implementing jsGrid: Appending a row with JSON information

How can I showcase the selected file using jQuery's querySelector?

Connect to the Kendo dropdown list undefined

Ways to loop through an array of daytime values and exhibit just the records for the current week

MongoDB Integration of Collections - No Data Population

Center-aligned navigation bar with all elements except for one positioned on the right side