调用自定义钩子时无效的钩子调用

Question

I've been trying to solve a problem for 4 days and I've searched and searched a lot! I'm not sure if I'm just searching for the wrong thing or seeing it and am just completely oblivious to it. My problem is that when I call the hook from the main function, it works, but when I call it via an onSubmit function, it fails for invalid hook call. I understand the concept of why the hook would be invalid, but am just completely unsure how to resolve it. I reformatted my hook so that I could initialize it earlier in my code and then call it via the onSubmit, but the problem is that the state token only gets updated on initialization and not whenever it's changed. Thus leading to some API calls with a bad token. Any Help Anyone can offer will be greatly appreciated!

The Setup: NextJS, React-Form, Redux via Next-Redux-Wrapper, SWR

When ReactForm validates the form, I'd like for it to submit it's data to a custom hook. However, that custom hook fails with the Invalid Hook Call. It does it as soon as I defined a variable for useState.

-- Form Code ---

const { register, errors, handleSubmit, setValue, reset, control } = useForm()
<form onSubmit={ handleSubmit(onSubmit) }>

-- onSubmit Code ---

const onSubmit = (data) => {
   const newData = useApiPost(`users/update/${ id }`, submitData)
}

-- Custom Hook --

function useApiPut(resource, params){
   const [ data, setData ] = useState(null)
   const [ error, setError ] = useState(null)

   const { url, data : inData } = rest(resource, params)

   //Post data
   const { data : resData, error : resError, mutate } = useSWR(
      state.user.token ? url : null,
      url => axios.request({
            url,
            method : 'post',
            data : inData,
            headers : { Authorization : `Bearer ${ state.user.token }` }
         })
         .then(({ data }) => data),
      { revalidateOnFocus : false }
   )

   useEffect(() => {
      if(resData) {
         setData(resData)
      }
      if(resError) {
         setError(resError)
      }
   }, [ resData, resError ])

   return { data, error, mutate }
}

Answer 1

So the answer to this ended up being a few different things.

First, accessing my store value via store.getState() resolved one issue with hooks.

Secondly, moving away from SWR. It is an AWESOME wrapper and capable of a TON, no doubt. I just kept struggling with it and finally gave up. I moved to using Axios Interceptors and it has been amazing. Axios doesn't cache (out of the box) like SWR, but I was utilizing the caching for tokens, so I wasn't really using it to it's full potential. Please note, I'm in no way bashing SWR, it's a really great and extremely powerful library.

Lastly, wrapping the entire set of hooks into one function allowed me to initialize the function at the root of my page and then access the hooks I needed to use later.

So instead of just calling useApiPost() now my hook looks like this:

const useApi = async() => {
   const post = async() => {
      //Do work here
   }
   return { post }
}

export default useApi

Then it's called like this inside the main function:

const { post } = useApi()

And it's called like this in the onSubmit Function:

const options = await post(resource, params)