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

Question

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);

Vladyslav Frizen · Accepted Answer · 2020-09-12 18:31:58Z

1

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]);

answered Sep 12, 2020 at 18:31

Vladyslav Frizen

2273 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related