Why isn't my ArcGIS JavaScript QueryTask working?

Question

var map;
    require([
            "esri/map", 
            "esri/layers/ArcGISDynamicMapServiceLayer", 
            "esri/layers/ImageParameters", 
            "esri/tasks/QueryTask", 
            "esri/tasks/query", 
            "esri/symbols/SimpleMarkerSymbol",
            "esri/InfoTemplate", 
            "dojo/_base/Color", 
            "dojo/domReady!"
            ], function(
            Map, 
            ArcGISDynamicMapServiceLayer, 
            ImageParameters, 
            QueryTask, 
            Query, 
            SimpleMarkerSymbol, 
            InfoTemplate, 
            Color
            ) {

    map = new Map("mapDiv", {
        center: [-123.8425, 45.4552],
        zoom: 16,
        basemap: "streets"
        });

    var imageParameters = new ImageParameters();

    imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;
    imageParameters.layerIds = [4];
    imageParameters.transparent = true;

    var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://host:6080/arcgis/rest/services/Data/MapServer", {
          "opacity" : 1.0,
          "imageParameters": imageParameters
        });

    map.addLayer(dynamicMapServiceLayer);

    queryTask = new QueryTask("http://host:6080/arcgis/rest/services/Data/MapServer/4");

    query = new Query();
    query.returnGeometry = true;
    query.outFields = ["OBJECTID"];

    infoTemplate = new InfoTemplate("${OBJECTID}", "OBJECTID : ${OBJECTID}");

    symbol = new SimpleMarkerSymbol();
    symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
    symbol.setSize(1000);
    symbol.setColor(new Color([255,0,0,1]));

    query.where = "OBJECTID = 1";

    queryTask.execute(query, showResults);

    function showResults(featureSet) {
        //remove all graphics on the maps graphics layer
        map.graphics.clear();

        //Performance enhancer - assign featureSet array to a single variable.
        var resultFeatures = featureSet.features;

        //Loop through each feature returned
        for (var i=0, il=resultFeatures.length; i<il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = resultFeatures[i];
            graphic.setSymbol(symbol);

            //Set the infoTemplate.
            graphic.setInfoTemplate(infoTemplate);

            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
        }   
    }

});

I followed this ESRI example:

https://developers.arcgis.com/javascript/jshelp/intro_querytask.html

But when I test it I get an error:

Resource interpreted as Script but transferred with MIME type text/plain: "http://host:6080/arcgis/rest/services/Data/MapServer/4/q…Fields=OBJECTID&callback=dojo.io.script.jsonp_dojoIoScript3._jsonpCallback". init.js:495
Resource interpreted as Script but transferred with MIME type text/plain: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer?f=json&callback=dojo.io.script.jsonp_dojoIoScript1._jsonpCallback". init.js:495
TypeError {stack: (...), message: "Cannot read property 'clear' of null"}
 "TypeError: Cannot read property 'clear' of null
    at showResults (http://test/test/script.js:61:15)
    at e._successHandler (http://js.arcgis.com/3.10/init.js:490:193)
    at e._handler (http://js.arcgis.com/3.10/init.js:1424:385)
    at http://js.arcgis.com/3.10/init.js:174:23
    at Object.d.load (http://js.arcgis.com/3.10/init.js:1420:411)
    at http://js.arcgis.com/3.10/init.js:630:478
    at c (http://js.arcgis.com/3.10/init.js:74:221)
    at d (http://js.arcgis.com/3.10/init.js:74:10)
    at resolve.callback (http://js.arcgis.com/3.10/init.js:75:350)
    at c (http://js.arcgis.com/3.10/init.js:74:436)" 

I know there should be a query result because I tested it through REST. I entered the query OBJECTID = 1 through REST and it returned a single record.

Any idea what could be wrong? I'm stumped.

Answer 1

Your query is working fine. The error stack trace you've submitted is pointing to the part of your showResults function where the map's graphics layer is told to clear. The this is usually thrown because the map's graphics layer hasn't loaded, which is probably because the map hasn't finished loading yet.

Where you have:

query.where = "OBJECTID = 1";

queryTask.execute(query, showResults);

Try replacing with the following:

if (map.loaded) {
    query.where = "OBJECTID = 1";
    queryTask.execute(query, showResults);
} else {
    map.on("load", function () {
        query.where = "OBJECTID = 1";
        queryTask.execute(query, showResults);
    });
}