Can you update package.json to accept new react version?

data is loaded fine (1. log), but once I call useState or useEffect, the code after (2. log) is no longer executed.
Not sure what's going on. No exception thrown. Works fine with plain fetch.
Did I miss something?

import useFetch from 'react-fetch-hook'; // 1.9.5

const UserTable = () => {
  const [users, setUsers] = useState([]);
  const { isLoading, data, error } = useFetch('/admin/users');
  console.log('data', isLoading, data, error);
  if (isLoading || !data) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  // setUsers([]); // if called, the following code  is dead
  // useEffect(() => { console.log('data changed') }, [data]); // same with this
  console.log('data2', data);
};

It seems like useFetch never fetches data if the depends is something like [''], but sets isLoading to false immediately, i.e. pretending like it finished loading, but just producing the value undefined. This means that if the value in the depends array is a string that might sometimes be empty, data might just happen to be undefined so any code that expects data to exist if isLoading is false fails.

Full component example:

import useFetch from "react-fetch-hook";


function App() {
  const { isLoading, data } = useFetch("https://api.github.com/", {depends:['']});
  console.log(data);
  return (   
    <p>
      {JSON.stringify(data)}
    </p>
  );
}

export default App;

I'm not sure if this is intended or not, but given that there are situations where depends might include a sometimes empty string, I assume not.

This isn't an issue, just trying to understand the code (and JS for that matter).

Why is this line called with [1] instead of 1?

Is it handling some edge case? Didn't have luck Googling it. Thanks

Is there a way to make it so I can use multiple useFetch hooks in the same file? Right now I get undefined for either variable that is different than 'isLoading' and 'data'. Is that on purpose?

It's only mentioned in https://github.com/ilyalesik/react-fetch-hook#usefetch
and it's duplicating regular options

=16.8.0 <18.0.0

This may be related to #24. Whenever I change the dependencies, I get three rerenders where I only expect to see two.

Expected:

1. Change dependencies.
2. Render with isLoading === true, data === null
3. Render with isLoading === false, data === <new-result>

Actual:

1. Change dependencies.
2. Render with isLoading === false, data === <previous-result>
3. Render with isLoading === true, data === <previous-result>
4. Render with isLoading === false, data === <new-result>

I don't care so much about data containing the previous result, and changing just that to null with no additional changes would be bad. But why am I getting that first rerender which is a copy of the previous call result? I would expect calling the hook with changed dependencies to immediately return with isLoading === true.

To be clear, everything works okay. The downside is the additional no-op render due to the first result being identical to the previous result. I assume the fetch call has been made by that point, and yet the hook tells me it's not loading. Is there any way to avoid that (step 2 above)?

const {authToken} = useContext(authTokenContext);
const [someState, setSomeState] = useState(false);
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
    depends: [!!authToken, someState] //don't call request, if haven't authToken and someState: false
});

The above should read: don't call request, if haven't authToken OR someState: false. Unless I've misunderstood.

When the isValidMail variable is false the data is correctly set to undefined but the isLoading changes to true.

const isValidMail = !validator_email(orgEmail).error
const {isLoading, data} = useFetch(`https://satec.cynation.com/api/v1/accounts/search/org?api-key=8a0b7868-57c8-430e-95a9-de915ff2b7d8&email=${orgEmail}`,{
    depends: [isValidMail]
  })

DevTool log (isValidMail=false):

isLoading: false index.js:91
data: undefined index.js:92
isLoading: true index.js:91
data: undefined index.js:92
isLoading: false index.js:91
data: undefined

DevTool log (isValidMail=true):

isLoading: false index.js:91
data: undefined index.js:92
isLoading: true index.js:91
data: undefined index.js:92
isLoading: false index.js:91
data: 
Object { orgId: "2c5168a8-1b5b-474e-96f8-f62e9dd51231", orgName: "Example" }

If rapid requests are issued, like in an autocomplete scenario, isLoading will be false even when hanging requests are still open.

In other words:

1. Setup a series of fetches quickly as the user is typing
2. When a new fetch is issued, cancel the previous fetches
3. isLoading will === false even though current fetch is still open
4. results will still correctly return

URL object can be not defined at some of platforms.
So, instanceOf URL can throw exception.

Hi
I have a question about the error message. Currently I receive a string but it would be nice to show different message based on the response status - like 401 or 500.
Is there a way to do this?
Thanks!

Example:

const Component = () => {
    const url = new URL("...");
    url.search = new URLSearchParams(params).toString();

    const result = useFetch(url);

    ...
}

after change params new request don't affected

Hi thank you for this great react fetch hook,
Is there a way to make the fetch abortable and abort it when component is unmount ?

Thank you

Hello,

I just tried out your lib. In use with useFetch, would it not be better to set isLoading initially to true? Otherwise the component initially would render as its not loading and a wrong component/logic could run.

Just an idea while testing this hook
Cheers

Hi! First of all, many thanks for a good tool, I use it in my project and it helps me a lot to keep the code clean.

Recently I needed to fetch some data and only then fetch other data that would be based on the result of the first fetch.

I try something like this. But as I understand it's doesn't working because hooks limitations.

  const { isLoading, data: repoData } = useFetch(`${endpoint.github}repos/${repo}`, {
    headers: new Headers({
      Authorization: `token ${process.env.GITHUB_TOKEN}`,
    })
  });

  if (!isLoading) {
    const userAPIUrl = repoData.owner.url; // Get this staff from another hook

    const { data: userData } = useFetch(`${endpoint.github}users/${userAPIUrl}`, {
      headers: new Headers({
        Authorization: `token ${process.env.GITHUB_TOKEN}`,
      })
    });
  }

Any ideas how I can implement it in a different way? I am not currently a React guru and I would be very grateful for any help in this case.

The pagination example uses fetch directly rather than useFetch. Was it meant to use useFetch?

Hi there,

Is there any implementation of react-fetch-hook for GraphQL ?
For example, the typical GraphQL query:

const MY_QUERY_QUERY = gql`
  query MyQuery {
    auth_user {
      email
      first_name
      id
      is_active
      last_name
      last_login
      username
    }
  }
`;

How to implement this query ?
Thanks!