I have a github pages project that I am trying to create. I've got it working great on local, but of course when I publish it it fails.

The problem is in this bit of javascript, which is supposed to pull some data from a json file in the repo to build the contents of a certain page:

(async function(){
  const response = await fetch(`https://GITUSER.github.io/GITREPO/tree/gh-pages/data/file.json`);//Error gets thrown here, because the asset does not exist in the current code state.
  const docData = await response.json();
  const contentTarget = document.getElementById('doc-target');
  const tocTarget = document.getElementById('toc-target')
  createContent(tocTarget,contentTarget,docData);
})();

Now, the problem is that pages won't load the asset because it doesn't know that it needs it until the function is called. Is there a way to get this asset loaded by pages so it can be called by the fetch API? Or is this beyond the capabilities of github pages?

Edited: Added some additional code for context.