Fetch (React) doesn't seem to be firing

site name: https://velvety-dodol-62c946.netlify.app/

PROBLEM: I’m not getting data back from my fetch request, which in turn, isn’t filling out my UI cards

I’ll include my deploy log below, but I’m not sure the answer is there. Problem I suspect is that the api isn’t being called(?), which is strange because I have had this site working prior. It also works on my localhost.

Is it possible that I’m being blocked from their server because they only recognize my IP address. I’d be more than happy to check this out on my own, I’m just not sure how to go about it. I can’t check server-side either as this was a project for a job interview… it’s not something I have access to.

2:37:28 PM: build-image version: 0e2f4c52031ab562db66aec633308326e3b108d0 (focal)
2:37:28 PM: build-image tag: focal
2:37:28 PM: buildbot version: 17781eb43cf82ba1890150fe75c9ab9320d6a721
2:37:28 PM: Building without cache
2:37:28 PM: Starting to prepare the repo for build
2:37:28 PM: No cached dependencies found. Cloning fresh repo
2:37:28 PM: git clone https://github.com/ymoose79/react-api-card
2:37:29 PM: Preparing Git Reference refs/heads/master
2:37:29 PM: Parsing package.json dependencies
2:37:30 PM: Starting build script
2:37:30 PM: Installing dependencies
2:37:30 PM: Python version set to 2.7
2:37:31 PM: Downloading and installing node v16.16.0...
2:37:31 PM: Downloading https://nodejs.org/dist/v16.16.0/node-v16.16.0-linux-x64.tar.xz...
2:37:32 PM: Computing checksum with sha256sum
2:37:32 PM: Checksums matched!
2:37:35 PM: Now using node v16.16.0 (npm v8.11.0)
2:37:35 PM: Started restoring cached build plugins
2:37:35 PM: Finished restoring cached build plugins
2:37:35 PM: Attempting ruby version 2.7.2, read from environment
2:37:36 PM: Using ruby version 2.7.2
2:37:37 PM: Using PHP version 8.0
2:37:37 PM: No npm workspaces detected
2:37:37 PM: Started restoring cached node modules
2:37:37 PM: Finished restoring cached node modules
2:37:38 PM: Installing NPM modules using NPM version 8.11.0
2:37:38 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
2:37:38 PM: npm WARN config location in the cache, and they are managed by
2:37:38 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
2:37:38 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
2:37:38 PM: npm WARN config location in the cache, and they are managed by
2:37:38 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
2:37:52 PM: npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
2:38:03 PM: npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
2:38:10 PM: added 1456 packages, and audited 1457 packages in 32s
2:38:10 PM: 192 packages are looking for funding
2:38:10 PM:   run `npm fund` for details
2:38:10 PM: 7 high severity vulnerabilities
2:38:10 PM: To address issues that do not require attention, run:
2:38:10 PM:   npm audit fix
2:38:10 PM: To address all issues (including breaking changes), run:
2:38:10 PM:   npm audit fix --force
2:38:10 PM: Run `npm audit` for details.
2:38:10 PM: NPM modules installed
2:38:10 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
2:38:10 PM: npm WARN config location in the cache, and they are managed by
2:38:10 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
2:38:10 PM: Started restoring cached go cache
2:38:10 PM: Finished restoring cached go cache
2:38:10 PM: Installing Go version 1.17 (requested 1.17)
2:38:17 PM: unset GOOS;
2:38:17 PM: unset GOARCH;
2:38:17 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.17.linux.amd64';
2:38:17 PM: export PATH="/opt/buildhome/.gimme/versions/go1.17.linux.amd64/bin:${PATH}";
2:38:17 PM: go version >&2;
2:38:17 PM: export GIMME_ENV="/opt/buildhome/.gimme/env/go1.17.linux.amd64.env"
2:38:17 PM: go version go1.17 linux/amd64
2:38:17 PM: Installing missing commands
2:38:17 PM: Verify run directory
2:38:18 PM: ​
2:38:18 PM: ────────────────────────────────────────────────────────────────
2:38:18 PM:   Netlify Build                                                 
2:38:18 PM: ────────────────────────────────────────────────────────────────
2:38:18 PM: ​
2:38:18 PM: ❯ Version
2:38:18 PM:   @netlify/build 27.4.2
2:38:18 PM: ​
2:38:18 PM: ❯ Flags
2:38:18 PM:   baseRelDir: true
2:38:18 PM:   buildId: 62dd913a8ea3650b03268072
2:38:18 PM:   deployId: 62dd913a8ea3650b03268074
2:38:18 PM: ​
2:38:18 PM: ❯ Current directory
2:38:18 PM:   /opt/build/repo
2:38:18 PM: ​
2:38:18 PM: ❯ Config file
2:38:18 PM:   No config file was defined: using default values.
2:38:18 PM: ​
2:38:18 PM: ❯ Context
2:38:18 PM:   production
2:38:18 PM: ​
2:38:18 PM: ────────────────────────────────────────────────────────────────
2:38:18 PM:   1. Build command from Netlify app                             
2:38:18 PM: ────────────────────────────────────────────────────────────────
2:38:18 PM: ​
2:38:18 PM: $ npm run build
2:38:19 PM: npm WARN config tmp This setting is no longer used.  npm stores temporary files in a special
2:38:19 PM: npm WARN config location in the cache, and they are managed by
2:38:19 PM: npm WARN config     [`cacache`](http://npm.im/cacache).
2:38:19 PM: > frontend_assessment@0.1.0 build
2:38:19 PM: > react-scripts build
2:38:20 PM: Creating an optimized production build...
2:38:36 PM: Compiled with warnings.
2:38:36 PM: 
2:38:36 PM: Warning
2:38:36 PM: (6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.
2:38:36 PM: src/App.js
2:38:36 PM:   Line 30:34:  Array.prototype.filter() expects a value to be returned at the end of arrow function  array-callback-return
2:38:36 PM: src/component/StudentCard.js
2:38:36 PM:   Line 21:11:  'tagStore' is assigned a value but never used  no-unused-vars
2:38:36 PM: Search for the keywords to learn more about each warning.
2:38:36 PM: To ignore, add // eslint-disable-next-line to the line before.
2:38:36 PM: File sizes after gzip:
2:38:36 PM:   75.89 kB  build/static/js/main.29cba09a.js
2:38:36 PM:   24.49 kB  build/static/css/main.46163cc2.css
2:38:36 PM: The project was built assuming it is hosted at /.
2:38:36 PM: You can control this with the homepage field in your package.json.
2:38:36 PM: The build folder is ready to be deployed.
2:38:36 PM: You may serve it with a static server:
2:38:36 PM:   npm install -g serve
2:38:36 PM:   serve -s build
2:38:36 PM: Find out more about deployment here:
2:38:36 PM:   https://cra.link/deployment
2:38:36 PM: ​
2:38:36 PM: (build.command completed in 17.7s)
2:38:36 PM: ​
2:38:36 PM: ────────────────────────────────────────────────────────────────
2:38:36 PM:   2. Deploy site                                                
2:38:36 PM: ────────────────────────────────────────────────────────────────
2:38:36 PM: ​
2:38:36 PM: Starting to deploy site from 'build'
2:38:36 PM: Creating deploy tree 
2:38:36 PM: Creating deploy upload records
2:38:36 PM: 0 new files to upload
2:38:36 PM: 0 new functions to upload
2:38:36 PM: Site deploy was successfully initiated
2:38:36 PM: ​
2:38:36 PM: (Deploy site completed in 220ms)
2:38:36 PM: ​
2:38:36 PM: ────────────────────────────────────────────────────────────────
2:38:36 PM:   Netlify Build Complete                                        
2:38:36 PM: ────────────────────────────────────────────────────────────────
2:38:36 PM: ​
2:38:36 PM: (Netlify Build completed in 17.9s)
2:38:36 PM: Starting post processing
2:38:36 PM: Post processing - HTML
2:38:37 PM: Post processing - header rules
2:38:37 PM: Caching artifacts
2:38:37 PM: Started saving node modules
2:38:37 PM: Finished saving node modules
2:38:37 PM: Started saving build plugins
2:38:37 PM: Finished saving build plugins
2:38:37 PM: Started saving pip cache
2:38:37 PM: Finished saving pip cache
2:38:37 PM: Started saving emacs cask dependencies
2:38:37 PM: Finished saving emacs cask dependencies
2:38:37 PM: Started saving maven dependencies
2:38:37 PM: Finished saving maven dependencies
2:38:37 PM: Started saving boot dependencies
2:38:37 PM: Post processing - redirect rules
2:38:37 PM: Finished saving boot dependencies
2:38:37 PM: Started saving rust rustup cache
2:38:37 PM: Finished saving rust rustup cache
2:38:37 PM: Started saving go dependencies
2:38:37 PM: Finished saving go dependencies
2:38:37 PM: Post processing done
2:38:39 PM: Site is live ✨
2:38:40 PM: Build script success
2:38:43 PM: Uploading Cache of size 147.0MB
2:38:44 PM: Finished processing build request in 1m16.220048225s
type or paste code here

I haven’t done much to the code, outside of adding a useRef for the useEffect to keep from double firing.

I don’t believe that is the problem, however. when I go back and hit PREVIEW in the deploy log from prior deployment:
" Deploy successful for velvety-dodol-62c946"
“Jun 16 at 5:08 PM, by ymoose79 on GitHub.”

… the UI card populates and functions.

However, when I hit OPEN PRODUCTION DEPLOY from the same build (Jun 16, 5:08), I get the same blank UI card as I do currently. I am flummoxed.

:wave: @jrstock , welcome to the community!

I haven’t done much to the code, outside of adding a useRef for the useEffect to keep from double firing.

Troubleshooting code is outside of our scope for support, but when testing the site we were able to remove the firstRenderRef.current = false; statement in the useEffect function from the dev console and observed the deploy preview rendering all cards.

Hope that helps! :slight_smile:

It does. It eliminates access to the API from unknown IP as being a problem.

Although, you’re right, I could’ve eliminated that myself had I backtracked the hook on my end (ah doi :crazy_face:). However, because it was functioning on my local machine, I didn’t think that was the problem.

I added that hook to avoid a double call to the API that happens with useEffect. It’s odd because when I remove the hook entirely, and add a console.log to my fetchData function, I get the double log on my local machine, but only one console.log on the netlify deployment.

I imagine it’s still hitting the API twice (?)… but I have no way of seeing that from the front end. I tweaked the logic a bit to allow it to still function on both my local and netlify and per my local, only hit the API once (so I assume same goes for the deployment ?..)

This may be somewhat of an “AHA” moment for me on how netlify serves websites.

Thank you for your time, Audrey, it’s appreciated.

Hey there, @jrstock :wave:

Thanks so much for reaching out and confirming things are working now after following @audrey’s solution. Let us know if you have further questions!