Add a GeoJSON in Mapbox GL JS

Question

I'm new to Mapbox and I want to add a GeoJSON made of polygons stored locally on my computer and I don't know how to do.

I've follow the example given by Mapbox (https://docs.mapbox.com/mapbox-gl-js/example/geojson-polygon/) but it's not doable to add 100 polygons that way. My file is structured like this:

{ "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
         "geometry": {
           "type": "Polygon",
           "coordinates": [
             [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
               [100.0, 1.0], [100.0, 0.0] ]
             ]
         },
         "properties": {
           "prop0": "value0",
           "prop1": {"this": "that"}
           }
         },
    { "type": "Feature",
         "geometry": {
           "type": "Polygon",
           "coordinates": [
             [ [100.0, 0.0], [105.0, 0.0], [108.0, 1.0],
               [100.0, 1.0], [100.0, 0.0] ]
             ]
         },
         "properties": {
           "prop0": "value0",
           "prop1": {"this": "that"}
           }
         }, 
       ]
     }

I've tried this but my polygons don't appear on my map. I think i'm doing something wrong on map.addSource.

<script>
    mapboxgl.accessToken = 'my_token';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [0, 0], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
    map.on('load', function () {

        map.addSource('scmpd-precinct-polygons', {
          type: 'geojson',
          data: 'my_file.geojson'
        });
     map.addLayer({
            'id': 'precinct-layer',
            'type': 'fill',
            'source': 'scmpd-precinct-polygons',
            'layout': {},
            'paint': {
                'fill-color': '#088',
                'fill-opacity': 0.8
            }
        });
    });
    

</script>