CODEWITHSUNDEEP
javascriptreactjsapireact-hooksfetch-api
ritchbeau
ritchbeau

Reputation: 43

Fetch data from API with multiple React hook useEffect when second fetch use data from first hook

I'm learning how to use Hooks and I'm trying to fetch data from 2 sources with 2 hooks when the 2nd hook take as parameter the result from 1rst hook.

I know you can do that with class (multiple axios get) but I'm trying to do it with hooks.

I have a file where I've built my axios.get and a file where I try to render the data.

I try to put {user.id} into the second hooks but it doesn't work. When I put the value of the user id (for example '1') in the second hook it's working.

Long story short I try to find the best way to only show connected user objects...I'm not an expert so there is probably a better way to do that.

Any idea of how to do that ? Thanks for helping me !!!

Here is the code:

GetObjects.js:

export const getUser = async (id) => {
  const url = `http://127.0.0.1:8000/api/user`;
  try {
    const response = await axios.get(url);
    return { response, isError: false };
  } catch (response) {
    return { response, isError: true };
  }
};

export const getUserObject = async (userId) => {
  const url = `http://127.0.0.1:8000/api/objects/?owner=${userId}`;
  try {
    const response = await axios.get(url);
    return { response, isError: false };
  } catch (response) {
    return { response, isError: true };
  }
};

RenderObjects.js

...
function FetchUserObjects(props) {
    const [objects, setObjects] = useState([]);
    const [user, setuser] = useState([]);

    useEffect(() => {
        const loadUser = async () => {
          const { response, isError } = await getUser();
          if (isError) {
            setuser([]);
          } else {
            setuser(response.data);
          }
        };
        loadUser();
      }, []);

    
    useEffect(() => {
      const loadObjects = async () => {
        const { response, isError } = await getUserObject();
        if (isError) {
          setObjects([]);
        } else {
          setObjects(response.data);
        }
      };
      loadObjects();
    }, []);

so this is not working :

const { response, isError } = await getUserObject({user.id});

But this is working :

const { response, isError } = await getUserObject(1);

Upvotes: 0

Views: 2866

Answers (1)

Vladyslav Frizen
Vladyslav Frizen

Reputation: 227

Try it:

function FetchUserObjects(props) {
    const [objects, setObjects] = useState([]);
    const [user, setuser] = useState([]);

    useEffect(() => {
        const loadUser = async () => {
          const { response, isError } = await getUser();
          if (isError) {
            setuser([]);
          } else {
            setuser(response.data);
          }
        };
        loadUser();
      }, []);

    
    useEffect(() => {
    if (!user) return
      const loadObjects = async () => {
        const { response, isError } = await getUserObject(user.id);
        if (isError) {
          setObjects([]);
        } else {
          setObjects(response.data);
        }
      };
      loadObjects();
    }, [user]);

Upvotes: 1

Related Questions