Fix fetchData

Claudio Yanes

2022-03-04 7e0f2e44497adeade4aa5a99da897be29cb49016

Fix fetchData

The fetchData function suffer from a race condition. If the function is
called before the promise finishes, it will result in another pair of
HTTP request. This does not only make the function useless but
Actually, it makes it harmful as the data might be redownloaded twice.

Now fetchData is not a function but rather the promise by itself.
Previous callers are expected to await the variable instead, this
should be not concern as awaiting a promise multiple time in
JavaScript is completely safe.

 .github/workflows/deploy.yaml

@@ -16,7 +16,7 @@
        with:
          index: true
          input: content
          output: static
          output: assets/indices
          root: .

      - name: Setup Hugo

 .gitignore

@@ -3,5 +3,5 @@
resources
.idea
content/.obsidian
static/linkIndex.json
static/contentIndex.json
assets/indices/linkIndex.json
assets/indices/contentIndex.json

 assets/js/graph.js

@@ -1,5 +1,5 @@
async function drawGraph(url, baseUrl, pathColors, depth, enableDrag, enableLegend, enableZoom) {
    const { index, links, content } = await fetchData()
    const { index, links, content } = await fetchData
    const curPage = url.replace(baseUrl, "")
  
    const parseIdsFromLinks = (links) => [...(new Set(links.flatMap(link => ([link.source, link.target]))))]

 assets/js/popover.js

@@ -8,7 +8,7 @@
function initPopover(base) {
    const baseUrl = base.replace(window.location.origin, "") // is this useless?
    document.addEventListener("DOMContentLoaded", () => {
        fetchData().then(({content}) => {
        fetchData.then(({content}) => {
        const links = [...document.getElementsByClassName("internal-link")]
        links.forEach(li => {
            const linkDest = content[li.dataset.src.replace(baseUrl, "")]

 assets/js/search.js

@@ -81,7 +81,7 @@
    }
    })

    const { content } = await fetchData()
    const { content } = await fetchData
    for (const [key, value] of Object.entries(content)) {
    contentIndex.add({
    id: key,

 layouts/partials/backlinks.html

@@ -3,9 +3,9 @@
    {{$url := urls.Parse .Site.BaseURL }}
    {{$host := strings.TrimRight "/" $url.Path }}
    {{$curPage := strings.TrimPrefix $host (strings.TrimRight "/" .Page.RelPermalink) }}
    {{$linkIndex := getJSON "/static/linkIndex.json"}}
    {{$linkIndex := getJSON "/assets/indices/linkIndex.json"}}
    {{$inbound := index $linkIndex.index.backlinks $curPage}}
    {{$contentTable := getJSON "/static/contentIndex.json"}}
    {{$contentTable := getJSON "/assets/indices/contentIndex.json"}}
    {{if $inbound}}
    {{$cleanedInbound := apply (apply $inbound "index" "." "source") "replace" "." " " "-"}}
    {{- range $cleanedInbound | uniq -}}

 layouts/partials/head.html

@@ -21,35 +21,25 @@
    <script src="{{$darkMode.Permalink}}"></script>

    <!--  Preload page vars  -->
    {{$linkIndex := resources.Get "indices/linkIndex.json" | resources.Fingerprint "md5" | resources.Minify |  }}
    {{$contentIndex := resources.Get "indices/contentIndex.json" | resources.Fingerprint "md5" | resources.Minify }}
    <script>
      const BASE_URL = {{.Site.BaseURL}}
      let saved = false
      const fetchData = async () => {
        if (saved) {
          return saved
        } else {
          const promises = [
            fetch("{{ .Site.BaseURL }}/linkIndex.json")
      const fetchData = Promise.all([
            fetch("{{ $linkIndex.Permalink }}")
              .then(data => data.json())
              .then(data => ({
                index: data.index,
                links: data.links,
              })),
            fetch("{{ .Site.BaseURL }}/contentIndex.json")
            fetch("{{ $contentIndex.Permalink }}")
              .then(data => data.json()),
          ]
          const [{index, links}, content] = await Promise.all(promises)
          const res = ({
          ])
          .then(([{index, links}, content]) => ({
            index,
            links,
            content,
          })
          saved = res
          return res
        }

      }
      fetchData()
          }))
    </script>
</head>
{{ template "_internal/google_analytics.html" . }}