Back to Front or Front to Back…
Previous post here.
I have an overall idea of what I want to achieve so I now need to make a start and have to decide where. In this case I have decided to work from front to back for a few reasons, firstly I have never used the Google Maps API before and I’m unsure of what information it will need from my backend and I want to make sure I can get it working! If I was unable to get it working or it didn’t satisfy my requirements I would need to look for an alternative solution.
I was able to get Google Maps to display using react-google-maps and a video on Youtube by Leigh Halliday. Using the package I was also able to display markers for venues and started off by hardcoding these values into the front end. I’m not 100% happy as I am getting errors that some of the package dependencies are due to be deprecated and the map also seems to refresh itself when clicking on and off markers. So I will add to the to-do list to look into this as well as other packages and also using OpenStreetMap and it’s Nominatim API.
So now I needed to move the data for my venues to the backend of my stack which is a two part process. Firstly I will create the backend application and as I’m learning Python and Flask I will be using this to do it, Flask is a minimal web framework that has powered Pinterest and LinkedIn. In my case I will use it to create a RESTful API server.
Flask proved very quick to get this basic RESTful index route up and going in such a small amount of code! I was then able to test the code in Insomnia which is a desktop API client and allows you to make requests and see what your server is actually returning.
I could see that my Flask server was returning what I expected so I now needed to do the second part of the process which was creating the fetch in the React front-end. Again the code for this was pretty minimal and simple and can be seen below.
Then I hit my first major stumbling block as it had all been going so well! I now had to bring this fetch into my React front-end and I’m using functional components with hooks and I got myself into a pickle. The first thing I tried to do was set the initial state of my useState hook to the fetch however this caused problems as my mapping component was trying to “map” the resultant array but there was nothing there to map while waiting for the result of the fetch.
The next thing I tried was to call the fetch when the component was loaded. It really didn’t like this one…
The problem here was that every time I got the result of a fetch the component was re-rendered which triggered another fetch which triggered another re-render… You get the idea. I think around this time I started trying loads of daft stuff in the hope that I could sort it and unsurprisingly it didn’t which was frustrating as I knew I had seen this problem before. So I went for a bike ride with my daughter and whilst getting a bit of fresh air I remembered I had previously used the useEffect hook to solve this. When I later got back to the code I tried this.
Although I didn’t get any angry red writing back from React this time it was still doing the same thing as I could see the map constantly reloading. Again the fetch was causing a re-render which was triggering another fetch… The solution was to pass a second argument of an empty array to useEffect as this stops the useEffect being triggered every time the component is re-rendered (if a value is passed into the array the useEffect will only be triggered when this value has changed between renders).
So passing an empty array as the second argument means the useEffect will be triggered on the initial render but not on any subsequent re-renders and therefore solves my problem of wanting to run the fetch once and then use the result to set state.
At this point I had a front-end that could get location data from my back-end server and then display it on a map. I think I’ll leave it there for now and next time will go through using a database to save my data.
Next blog here.