axios-hooks | 🦆 React hooks for axios | Frontend Utils library

I am trying to implement an file upload button, where the data is then sent to an API. As the input field should not be visible and only the button should trigger the upload dialog, I have implemented it this way.

Problem: The File is not set to state, so I can not use a POST via axios in the onChange function.

This is my 404.tsx page component, Hi, I'm having a problem when building gatsby withgatsby build always getting this error, FYI I use axios-hooks , how to solve this please?, but it works fine while development

I have a page on my Gatsby site that queries information for a number of businesses, including their address, city, and state, and that allows me to pass the data down to my component, in this case LocationList, and map over the results. I'm wondering if it's possible to split the results more precisely so that I can have the locations separated by a heading i.e. 'California', and below it all of the locations that are in California, or 'Arizona, and below it all the locations in Arizona? I'm building in Gatsby/GraphQl, and I'll include all the code I think is necessary, but feel free to ask for more, or for clarification.

locations.tsx

I've got component that displays contact information from a dealer as chosen by a user. To be more specific, a user selects their location, setting a cookie which then is used to define the API call. I pull in the contact information of the dealer in that location using Axios, store it in a context, and then display the information as necessary through several components: the header, a "current location" component etc.

The problem that I'm currently running into is that the contact information, as displayed in the Header for example, doesn't update until a user performs a hard refresh of the page, so, assuming the default text of the button is something like "Find A Dealer", once a dealer is selected, the button label should say the name of the dealer the user has selected. At present, it isn't working that way. Below is the code for the Header component, and my ApiContext.

ApiContext.tsx

I'm trying to build a section of my site that will dynamically pull in contact information from a REST API. At this point I'm using the sample API from https://jsonplaceholder.typicode.com.

I'm trying to use axios, specifically the useAxios and makeUseAxios hooks, to fetch the API, and store it in an app context that I can then use throughout the site, preferably with the useContext hook. Additionally, I'm needing to be able to update the API call based on user interactions, allowing them to select a location, have the API update, and store that in the app's context so that it all updates dynamically.

Essentially, I've gotten a basic useContext scenario working based on this tutorial, but I am struggling with how to store the JSON response in such a way that I can reference it in useContext. Here's the closest thing I've had going so far:

AppContext.tsx

I need to mock a function useAxios but this is called in two different components, and one of these components is used inside the other. This is my code:

I am new to Jest, and I want to mock useAxios from axios-hooks in order to avoid actually calling a service. This is my copmonent:

I've written a custom React hook that uses jQuery to fetch results from a given URL via AJAX (this is in the context of a legacy application, hence the need to use jQuery for AJAX), the API for which is loosely inspired by axios-hooks. The code for this is as follows (note it includes Flow annotations):