Nexjs + SWR: API resolved without sending a response for /api/projects/, this may result in stalled requests

Question

Since on first render I was not able to get the router.query I am passing the params from getServerSideProps as follows:

export async function getServerSideProps(context) {
    return {
        props: { params: context.params },
    };
}

Then in the function am trying to do the API call but am getting the API stalled error

API resolved without sending a response for /api/projects/nichole_robel23, this may result in stalled requests.

This is my code:

export default function Project({ params }) {
    const { slug } = params;

    let [projectData, setProjectData] = useState([]);
    let [loading, setLoading] = useState(true);

    const { data } = useSWR('http://localhost:3000/api/projects/' + slug);

    useEffect(() => {
        if (data) {
            setProjectData(data.data.project);
            setLoading(false);
        }
    }, [data]);

......

I have global SWRCofig as follows

<SWRConfig value={{ fetcher: (url) => axios(url).then(r => r.data) }}>
                        <Layout>
                            <Component {...pageProps} />
                        </Layout>
                    </SWRConfig>

Any way to solve the problem?

Sounds like the API call is not resolving/returning - can you share that API code so we can see a response is being returned? — Samuel Goldenbaum, Sep 16 '21 at 17:50
@SamuelGoldenbaum API is working. the call itself is not being made. — Harsha M V, Sep 16 '21 at 17:55
I think that, and your fetcher is the issue, I'll detail in an answer below — Samuel Goldenbaum, Sep 16 '21 at 19:08
Does it help? https://stackoverflow.com/questions/62012994/next-js-api-api-resolved-without-sending-a-response-for-api-employees-this-m/62016142#62016142 — Nikolai Kiselev, Sep 17 '21 at 06:13
@HarshaMV Your API route may be working, but we'd still need to see its code to troubleshoot the issue. — juliomalves, Sep 18 '21 at 18:17

score 3 · Accepted Answer · answered Sep 16 '21 at 19:26

You are missing your fetcher–the function that accepts the key of SWR and returns the data, so the API is not being called.

You are also not returning a response correctly from the API–this is most likely a case of not waiting for a promise/async to be fulfilled correctly.

CLIENT

const fetcher = (...args) => fetch(...args).then((res) => res.json());

export default function Home({ params }) {
  const { slug } = params;
  const [projectData, setProjectData] = useState([]);
  const [loading, setLoading] = useState(true);

  const { data } = useSWR(`http://localhost:3000/api/projects/${slug}`, fetcher);

  useEffect(() => {
    if (data) {
      setProjectData(data);
      setLoading(false);
    }
  }, [data]);

API

const getData = () => {
  return new Promise((resolve, reject) => {
    // simulate delay
    setTimeout(() => {
      return resolve([{ name: 'luke' }, { name: 'darth' }]);
    }, 2000);
  });
}

export default async (req, res) => {
  // below will result in: API resolved without sending a response for /api/projects/vader, this may result in stalled requests
  // getData()
  //   .then((data) => {
  //     res.status(200).json(data);
  //   });

  // better
  const data = await getData();
  res.status(200).json(data);
}

I have set the Fetcher in the SWRConfig which is enclosing the Layout at the top level like this ` axios(url).then(r => r.data) }}>` — Harsha M V, Sep 16 '21 at 21:23
Ok, and the response from the API—did you see the example above? — Samuel Goldenbaum, Sep 17 '21 at 00:01

Nexjs + SWR: API resolved without sending a response for /api/projects/, this may result in stalled requests

1 Answers1