2

I'm trying to initialise a Recoil atom using the Next API but encountering an error.

The default value is set to the function that makes the call to the Next API endpoint, which then retrieves some data from firebase.

When I then try to use the atom in a component using useRecoilState and log its value, I get this error:

error - TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:371:5)
    at onParseError (node:internal/url:552:9)
    at new URL (node:internal/url:628:5)
    at dispatchHttpRequest (file:///C:/Users/JoelMcMahon/projects/amt/amtAdmin/amt-admin-utility-v2/node_modules/axios/lib/adapters/http.js:169:20)
    at new Promise (<anonymous>)
    at httpAdapter (file:///C:/Users/JoelMcMahon/projects/amt/amtAdmin/amt-admin-utility-v2/node_modules/axios/lib/adapters/http.js:105:10)
    at Axios.dispatchRequest (file:///C:/Users/JoelMcMahon/projects/amt/amtAdmin/amt-admin-utility-v2/node_modules/axios/lib/core/dispatchRequest.js:46:10)
    at Axios.request (file:///C:/Users/JoelMcMahon/projects/amt/amtAdmin/amt-admin-utility-v2/node_modules/axios/lib/core/Axios.js:140:33)
    at wrap (file:///C:/Users/JoelMcMahon/projects/amt/amtAdmin/amt-admin-utility-v2/node_modules/axios/lib/helpers/bind.js:5:15)
    at eval (webpack-internal:///./src/Modules/getUsers.ts:12:58) {
  input: '/api/users/getUsersFromDatabase',
  code: 'ERR_INVALID_URL',
  page: '/'
}

I've also tried setting the default value of the atom as a selector that makes the query using async await but still get the error.

Here are the relevant files:

atoms.js:

import { atom } from "recoil";
import { getUsers } from "../Modules/getUsers";

export const userListPromise = atom({
  key: "userListPromise",
  default: getUsers(),
});

getUsers.ts:

import axios from "axios";

export const getUsers = (): Promise<any> => {
  return new Promise((resolve, reject) => {
    axios({
      method: "GET",
      url: "/api/users/getUsersFromDatabase",
    })
      .then((response) => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
};

getUsersFromDatabase.ts

import axios from "axios";
import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const url = //My Cloud Function URL//;

  axios({
    method: "GET",
    url: url,
  })
    .then((response) => {
      res.status(200).json(response.data);
    })
    .catch((error) => {
      res.status(400).json({ message: `Failed to get users: ${error}` });
    });
}

UserDisplay.tsx:

import React from "react";
import { useRecoilState } from "recoil";
import { userListPromise } from "../Atoms/atoms";
import { getUsers } from "../Modules/getUsers";

const UserDisplay = () => {

  const [userList] = useRecoilState(userListPromise);

  console.log(userList);
  return (
    <div>
    </div>
  );
};

export default UserDisplay;

If I comment out the lines using the state in UserDisplay.tsx:

 const [userList] = useRecoilState(userListPromise);

  console.log(userList);

then start the development server, uncomment them and save causing a live reload, then the error does not occur. However, if I then refresh the page or try to start the server initially with those lines uncommented, I get the error.

Any help or guidance would be greatly appreciated.

I'm using next v12.3.1 and recoil v0.7.6

joel
  • 21
  • 2

0 Answers0