\n \n \n
\n

Student Registration System

\n
\n\n
\n
\n \n","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2262","displayCommentEventSequenceNumber":2262},{"id":"commentId-5","developerGroupId":"devGroupId-2","timestamp":1612482194362,"commentText":"Then I create a string with a GraphQL query to retrieve the names of all\n of the students from the server I created in a previous playback.","selectedCodeBlocks":[{"fileId":"fileId-2","selectedText":"const query = `\n query {\n students {\n lastName\n firstName\n }\n }\n `;","startRow":9,"startColumn":16,"endRow":16,"endColumn":18,"selectedTextEventIds":["ev-1512","ev-1513","ev-1514","ev-1515","ev-1516","ev-1517","ev-1518","ev-1519","ev-1520","ev-1521","ev-1522","ev-1523","ev-1524","ev-1525","ev-1526","ev-1527","ev-1528","ev-1529","ev-1530","ev-1531","ev-1532","ev-1533","ev-1534","ev-1535","ev-1536","ev-1537","ev-1538","ev-1539","ev-1540","ev-1541","ev-1542","ev-1543","ev-1544","ev-1545","ev-1546","ev-1547","ev-1548","ev-1549","ev-1550","ev-1551","ev-1552","ev-1553","ev-1554","ev-1555","ev-1556","ev-1557","ev-1558","ev-1559","ev-1560","ev-1561","ev-1562","ev-1563","ev-1564","ev-1565","ev-1566","ev-1567","ev-1568","ev-1569","ev-1570","ev-1571","ev-1572","ev-1573","ev-1574","ev-1575","ev-1576","ev-1577","ev-1578","ev-1579","ev-1580","ev-1581","ev-1582","ev-1583","ev-1584","ev-1585","ev-1586","ev-1587","ev-1588","ev-1589","ev-1590","ev-1591","ev-1592","ev-1593","ev-1594","ev-1595","ev-1596","ev-1597","ev-1598","ev-1599","ev-1600","ev-1601","ev-1602","ev-1603","ev-1604","ev-1605","ev-1606","ev-1607","ev-1608","ev-1609","ev-1610","ev-1611","ev-1612","ev-1613","ev-1614","ev-1615","ev-1616","ev-1617","ev-1618","ev-1619","ev-1620","ev-1621","ev-1622","ev-1623","ev-1624","ev-1625","ev-1626","ev-1627","ev-1628","ev-1629","ev-1630","ev-1631","ev-1632","ev-1633","ev-1634","ev-1635","ev-1636","ev-1637","ev-1638","ev-1639","ev-1640","ev-1641","ev-1642","ev-1643","ev-1644","ev-1645","ev-1646","ev-1647","ev-1648","ev-1649","ev-1650","ev-1651","ev-1652","ev-1653","ev-1654","ev-1655","ev-1656","ev-1657","ev-1658","ev-1659","ev-1660","ev-1661","ev-1662","ev-1663","ev-1664","ev-1665","ev-1666","ev-1667","ev-1668","ev-1669","ev-1670","ev-1671","ev-1672","ev-1673","ev-1674","ev-1675","ev-1676","ev-1677","ev-1678","ev-1679","ev-1680","ev-1681","ev-1682","ev-1683","ev-1684","ev-1685","ev-1686","ev-1687","ev-1688","ev-1689","ev-1690","ev-1691","ev-1692","ev-1693","ev-1694","ev-1695","ev-1696","ev-1697","ev-1698","ev-1699","ev-1700","ev-1701","ev-1702","ev-1703","ev-1704","ev-1705","ev-1706","ev-1707","ev-1708","ev-1709","ev-1710","ev-1711","ev-1712","ev-1713","ev-1714","ev-1715","ev-1716","ev-1717","ev-1718","ev-1719","ev-1720","ev-1721","ev-1722","ev-1723","ev-1724","ev-1725","ev-1726","ev-1727","ev-1728","ev-1729","ev-1730","ev-1731","ev-1732"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"2","linesBelow":"14","currentFilePath":"/public/index.html","viewableBlogText":" ","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2262","displayCommentEventSequenceNumber":2262},{"id":"commentId-6","developerGroupId":"devGroupId-2","timestamp":1612482285005,"commentText":"Before I use the fetch function I create some variables to hold information about the request. I create a variable, url, to hold the url of the GraphQL server. To keep things simple I will be running my server on localhost:4000.

Then I specify some fetch options with an object, opt. It specifies that the http message will be a POST with JSON data in it. Then I create an object with the query text and stringify it before adding it to the body property of the options.","selectedCodeBlocks":[{"fileId":"fileId-2","selectedText":"const url = \"http://localhost:4000/\";\n const opts = {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ query })\n };","startRow":18,"startColumn":16,"endRow":23,"endColumn":18,"selectedTextEventIds":["ev-1762","ev-1763","ev-1764","ev-1765","ev-1766","ev-1767","ev-1768","ev-1769","ev-1770","ev-1771","ev-1772","ev-1773","ev-1774","ev-1775","ev-1776","ev-1777","ev-1778","ev-1779","ev-1780","ev-1781","ev-1782","ev-1783","ev-1784","ev-1785","ev-1786","ev-1787","ev-1788","ev-1789","ev-1790","ev-1791","ev-1792","ev-1793","ev-1794","ev-1795","ev-1796","ev-1797","ev-1798","ev-1799","ev-1800","ev-1801","ev-1802","ev-1803","ev-1804","ev-1805","ev-1806","ev-1807","ev-1808","ev-1809","ev-1810","ev-1811","ev-1812","ev-1813","ev-1814","ev-1815","ev-1816","ev-1817","ev-1818","ev-1819","ev-1820","ev-1821","ev-1822","ev-1823","ev-1824","ev-1825","ev-1826","ev-1827","ev-1828","ev-1829","ev-1830","ev-1831","ev-1832","ev-1833","ev-1834","ev-1835","ev-1836","ev-1837","ev-1838","ev-1839","ev-1840","ev-1841","ev-1842","ev-1843","ev-1844","ev-1845","ev-1846","ev-1847","ev-1848","ev-1849","ev-1850","ev-1851","ev-1852","ev-1853","ev-1854","ev-1855","ev-1856","ev-1857","ev-1858","ev-1859","ev-1860","ev-1861","ev-1862","ev-1863","ev-1864","ev-1865","ev-1866","ev-1867","ev-1868","ev-1869","ev-1870","ev-1871","ev-1872","ev-1873","ev-1874","ev-1875","ev-1876","ev-1877","ev-1878","ev-1879","ev-1880","ev-1881","ev-1882","ev-1883","ev-1884","ev-1885","ev-1886","ev-1887","ev-1888","ev-1889","ev-1890","ev-1891","ev-1892","ev-1893","ev-1894","ev-1895","ev-1896","ev-1897","ev-1898","ev-1899","ev-1900","ev-1901","ev-1902","ev-1903","ev-1904","ev-1905","ev-1906","ev-1907","ev-1908","ev-1909","ev-1910","ev-1911","ev-1912","ev-1913","ev-1914","ev-1915","ev-1916","ev-1917","ev-1918","ev-1919","ev-1920","ev-1921","ev-1922","ev-1923","ev-1924","ev-1925","ev-1926","ev-1927","ev-1928","ev-1929","ev-1930","ev-1931","ev-1932","ev-1933","ev-1934","ev-1935","ev-1936","ev-1937","ev-1938","ev-1939","ev-1940","ev-1941","ev-1942","ev-1943","ev-1944","ev-1945","ev-1946","ev-1947","ev-1948","ev-1949","ev-1950","ev-1951","ev-1952","ev-1953","ev-1954","ev-1955","ev-1956","ev-1957","ev-1958","ev-1959","ev-1960","ev-1961","ev-1962","ev-1963","ev-1964","ev-1965","ev-1966","ev-1967","ev-1968","ev-1969","ev-1970","ev-1971","ev-1972","ev-1973","ev-1974","ev-1975","ev-1976","ev-1977","ev-1978","ev-1979","ev-1980","ev-1981","ev-1982","ev-1983","ev-1984","ev-1985","ev-1986","ev-1987","ev-1988","ev-1989","ev-1990","ev-1991","ev-1992","ev-1993","ev-1994","ev-1995","ev-1996","ev-1997","ev-1998","ev-1999","ev-2000","ev-2001","ev-2002","ev-2003","ev-2004","ev-2005","ev-2006"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"11","linesBelow":"7","currentFilePath":"/public/index.html","viewableBlogText":" ","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2262","displayCommentEventSequenceNumber":2262},{"id":"commentId-7","developerGroupId":"devGroupId-2","timestamp":1612482346628,"commentText":"Next, I use the browser's built in fetch function to make the request.","selectedCodeBlocks":[{"fileId":"fileId-2","selectedText":"fetch(url, opts)\n .then(response => response.json())\n .then(response => displayStudents(response.data.students))\n .catch(console.error);","startRow":25,"startColumn":16,"endRow":28,"endColumn":42,"selectedTextEventIds":["ev-2036","ev-2037","ev-2038","ev-2039","ev-2040","ev-2041","ev-2042","ev-2043","ev-2044","ev-2045","ev-2046","ev-2047","ev-2048","ev-2049","ev-2050","ev-2051","ev-2052","ev-2053","ev-2054","ev-2055","ev-2056","ev-2057","ev-2058","ev-2059","ev-2060","ev-2061","ev-2062","ev-2063","ev-2064","ev-2065","ev-2066","ev-2067","ev-2068","ev-2069","ev-2070","ev-2071","ev-2072","ev-2073","ev-2074","ev-2075","ev-2076","ev-2077","ev-2078","ev-2079","ev-2080","ev-2081","ev-2082","ev-2083","ev-2084","ev-2085","ev-2086","ev-2087","ev-2088","ev-2089","ev-2090","ev-2091","ev-2092","ev-2093","ev-2094","ev-2095","ev-2096","ev-2097","ev-2098","ev-2099","ev-2100","ev-2101","ev-2102","ev-2103","ev-2104","ev-2105","ev-2106","ev-2107","ev-2108","ev-2109","ev-2110","ev-2111","ev-2112","ev-2113","ev-2114","ev-2115","ev-2116","ev-2117","ev-2118","ev-2119","ev-2120","ev-2121","ev-2122","ev-2123","ev-2124","ev-2125","ev-2126","ev-2127","ev-2128","ev-2129","ev-2130","ev-2131","ev-2132","ev-2133","ev-2134","ev-2135","ev-2136","ev-2137","ev-2138","ev-2139","ev-2140","ev-2141","ev-2142","ev-2143","ev-2144","ev-2145","ev-2146","ev-2147","ev-2148","ev-2149","ev-2150","ev-2151","ev-2152","ev-2153","ev-2154","ev-2155","ev-2156","ev-2157","ev-2158","ev-2159","ev-2160","ev-2161","ev-2162","ev-2163","ev-2164","ev-2165","ev-2166","ev-2167","ev-2168","ev-2169","ev-2170","ev-2171","ev-2172","ev-2173","ev-2174","ev-2175","ev-2176","ev-2177","ev-2178","ev-2179","ev-2180","ev-2181","ev-2182","ev-2183","ev-2184","ev-2185","ev-2186","ev-2187","ev-2188","ev-2189","ev-2190","ev-2191","ev-2192","ev-2193","ev-2194","ev-2195","ev-2196","ev-2197","ev-2198","ev-2199","ev-2200","ev-2201","ev-2202","ev-2203","ev-2204","ev-2205","ev-2206","ev-2207","ev-2208","ev-2209","ev-2210","ev-2211","ev-2212","ev-2213","ev-2214","ev-2215","ev-2216","ev-2217","ev-2218","ev-2219","ev-2220","ev-2221","ev-2222","ev-2223","ev-2224","ev-2225","ev-2226","ev-2227","ev-2228","ev-2229"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"18","linesBelow":"2","currentFilePath":"/public/index.html","viewableBlogText":" ","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2262","displayCommentEventSequenceNumber":2262},{"id":"commentId-8","developerGroupId":"devGroupId-2","timestamp":1612482390208,"commentText":"fetch returns a promise so I chain together a few calls to then. The first one turns the JSON response into a javascript object ...","selectedCodeBlocks":[{"fileId":"fileId-2","selectedText":".then(response => response.json())","startRow":26,"startColumn":20,"endRow":26,"endColumn":54,"selectedTextEventIds":["ev-2073","ev-2074","ev-2075","ev-2076","ev-2077","ev-2078","ev-2079","ev-2080","ev-2081","ev-2082","ev-2083","ev-2084","ev-2085","ev-2086","ev-2087","ev-2088","ev-2089","ev-2090","ev-2091","ev-2092","ev-2093","ev-2094","ev-2095","ev-2096","ev-2097","ev-2098","ev-2099","ev-2100","ev-2101","ev-2102","ev-2103","ev-2104","ev-2105","ev-2106","ev-2107"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"19","linesBelow":"4","currentFilePath":"/public/index.html","viewableBlogText":" ","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2262","displayCommentEventSequenceNumber":2262},{"id":"commentId-9","developerGroupId":"devGroupId-2","timestamp":1612484602049,"commentText":"... and the second one retrieves the array of students and passes it to a function that I will write in a moment called displayStudents. The object returned looks like this:
{
  \"data\": {
    \"students\": [
      {
        \"lastName\":\"Mahoney\",
        \"firstName\":\"Mark\"
      },
      {
        \"lastName\":\"Mahoney\",
        \"firstName\":\"Laura\"
      },
      {
        \"lastName\":\"Mahoney\",
        \"firstName\":\"Buddy\"
      },
      {
        \"lastName\":\"Mahoney\",
        \"firstName\":\"Patrick\"
      }
    ]
  }
}","selectedCodeBlocks":[{"fileId":"fileId-2","selectedText":".then(response => displayStudents(response.data.students))","startRow":27,"startColumn":20,"endRow":27,"endColumn":78,"selectedTextEventIds":["ev-2128","ev-2129","ev-2130","ev-2131","ev-2132","ev-2133","ev-2134","ev-2135","ev-2136","ev-2137","ev-2138","ev-2139","ev-2140","ev-2141","ev-2142","ev-2143","ev-2144","ev-2145","ev-2146","ev-2147","ev-2148","ev-2149","ev-2150","ev-2151","ev-2152","ev-2153","ev-2154","ev-2155","ev-2156","ev-2157","ev-2158","ev-2159","ev-2160","ev-2161","ev-2162","ev-2163","ev-2164","ev-2165","ev-2166","ev-2167","ev-2168","ev-2169","ev-2170","ev-2171","ev-2172","ev-2173","ev-2174","ev-2175","ev-2176","ev-2177","ev-2178","ev-2179","ev-2180","ev-2181","ev-2182","ev-2183","ev-2184","ev-2185","ev-2186"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"20","linesBelow":"3","currentFilePath":"/public/index.html","viewableBlogText":" ","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2262","displayCommentEventSequenceNumber":2262}],"ev-2617":[{"id":"commentId-10","developerGroupId":"devGroupId-2","timestamp":1612482638257,"commentText":"In the previous step I called a function that takes an array of students from the GraphQL server. Next, I will write the function that displays them.","selectedCodeBlocks":[{"fileId":"fileId-2","selectedText":"displayStudents(response.data.students))","startRow":34,"startColumn":38,"endRow":34,"endColumn":78,"selectedTextEventIds":["ev-2146","ev-2147","ev-2148","ev-2149","ev-2150","ev-2151","ev-2152","ev-2153","ev-2154","ev-2155","ev-2156","ev-2157","ev-2158","ev-2159","ev-2160","ev-2161","ev-2162","ev-2163","ev-2164","ev-2165","ev-2166","ev-2167","ev-2168","ev-2169","ev-2170","ev-2171","ev-2172","ev-2173","ev-2174","ev-2175","ev-2176","ev-2177","ev-2178","ev-2179","ev-2180","ev-2181","ev-2182","ev-2183","ev-2184","ev-2185","ev-2186"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"27","linesBelow":"3","currentFilePath":"/public/index.html","viewableBlogText":" ","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2617","displayCommentEventSequenceNumber":2617},{"id":"commentId-11","developerGroupId":"devGroupId-2","timestamp":1612482710639,"commentText":"The new function marches through each student object and adds the first and last name to the div. See the attached screenshot.

Note: To run this code I need to run the GraphQL server AND run the express server. I do this with two separate command prompts.","selectedCodeBlocks":[{"fileId":"fileId-2","selectedText":"function displayStudents(studentsArray) {\n const allStudentInfo = document.querySelector(\"#allStudentInfo\"); \n studentsArray.forEach(studentInfo => {\n allStudentInfo.innerHTML += `${studentInfo.firstName} ${studentInfo.lastName}
`\n });\n }","startRow":8,"startColumn":12,"endRow":13,"endColumn":13,"selectedTextEventIds":["ev-2276","ev-2277","ev-2278","ev-2279","ev-2280","ev-2281","ev-2282","ev-2283","ev-2284","ev-2285","ev-2286","ev-2287","ev-2288","ev-2289","ev-2290","ev-2291","ev-2292","ev-2293","ev-2294","ev-2295","ev-2296","ev-2297","ev-2298","ev-2299","ev-2300","ev-2301","ev-2302","ev-2303","ev-2304","ev-2305","ev-2306","ev-2307","ev-2308","ev-2309","ev-2310","ev-2311","ev-2312","ev-2313","ev-2314","ev-2315","ev-2316","ev-2317","ev-2318","ev-2319","ev-2320","ev-2321","ev-2322","ev-2323","ev-2324","ev-2325","ev-2326","ev-2327","ev-2328","ev-2329","ev-2330","ev-2331","ev-2332","ev-2333","ev-2334","ev-2335","ev-2336","ev-2337","ev-2338","ev-2339","ev-2340","ev-2341","ev-2342","ev-2343","ev-2344","ev-2345","ev-2346","ev-2347","ev-2348","ev-2349","ev-2350","ev-2351","ev-2352","ev-2353","ev-2354","ev-2355","ev-2356","ev-2357","ev-2358","ev-2359","ev-2360","ev-2361","ev-2362","ev-2363","ev-2364","ev-2365","ev-2366","ev-2367","ev-2368","ev-2369","ev-2370","ev-2371","ev-2372","ev-2373","ev-2374","ev-2375","ev-2376","ev-2377","ev-2378","ev-2379","ev-2380","ev-2381","ev-2382","ev-2383","ev-2384","ev-2385","ev-2386","ev-2387","ev-2388","ev-2389","ev-2390","ev-2391","ev-2392","ev-2393","ev-2394","ev-2395","ev-2396","ev-2397","ev-2398","ev-2399","ev-2400","ev-2401","ev-2402","ev-2403","ev-2404","ev-2405","ev-2406","ev-2407","ev-2408","ev-2409","ev-2410","ev-2411","ev-2412","ev-2413","ev-2414","ev-2415","ev-2416","ev-2417","ev-2418","ev-2419","ev-2420","ev-2421","ev-2422","ev-2423","ev-2424","ev-2425","ev-2426","ev-2427","ev-2428","ev-2429","ev-2430","ev-2431","ev-2432","ev-2433","ev-2434","ev-2435","ev-2436","ev-2437","ev-2438","ev-2439","ev-2440","ev-2441","ev-2442","ev-2443","ev-2444","ev-2445","ev-2446","ev-2447","ev-2448","ev-2449","ev-2450","ev-2451","ev-2452","ev-2453","ev-2454","ev-2455","ev-2456","ev-2457","ev-2458","ev-2459","ev-2460","ev-2461","ev-2462","ev-2463","ev-2464","ev-2465","ev-2466","ev-2467","ev-2468","ev-2469","ev-2470","ev-2471","ev-2472","ev-2473","ev-2474","ev-2475","ev-2476","ev-2477","ev-2478","ev-2479","ev-2480","ev-2481","ev-2482","ev-2483","ev-2484","ev-2485","ev-2486","ev-2487","ev-2488","ev-2489","ev-2490","ev-2491","ev-2492","ev-2493","ev-2494","ev-2495","ev-2496","ev-2497","ev-2498","ev-2499","ev-2500","ev-2501","ev-2502","ev-2503","ev-2504","ev-2505","ev-2506","ev-2507","ev-2508","ev-2509","ev-2510","ev-2511","ev-2512","ev-2513","ev-2514","ev-2515","ev-2516","ev-2517","ev-2518","ev-2519","ev-2520","ev-2521","ev-2522","ev-2523","ev-2524","ev-2525","ev-2526","ev-2527","ev-2528","ev-2529","ev-2530","ev-2531","ev-2532","ev-2533","ev-2534","ev-2535","ev-2536","ev-2537","ev-2538","ev-2539","ev-2540","ev-2541","ev-2542","ev-2543","ev-2544","ev-2545","ev-2546","ev-2547","ev-2548","ev-2549","ev-2550","ev-2551","ev-2552","ev-2553","ev-2554","ev-2555","ev-2556","ev-2557","ev-2558","ev-2559","ev-2560","ev-2561","ev-2562","ev-2563","ev-2564","ev-2565","ev-2566","ev-2567","ev-2568","ev-2569","ev-2570","ev-2571","ev-2572","ev-2573","ev-2574","ev-2575","ev-2576","ev-2577","ev-2578","ev-2579","ev-2580","ev-2581","ev-2582","ev-2583","ev-2584","ev-2585","ev-2586","ev-2587","ev-2588","ev-2589","ev-2590","ev-2591","ev-2592","ev-2593","ev-2594","ev-2595","ev-2596","ev-2597","ev-2598","ev-2599","ev-2600","ev-2601","ev-2602","ev-2603","ev-2604","ev-2605"]}],"imageURLs":["/media/images/pb625-1612482705342-image.png"],"videoURLs":[],"audioURLs":[],"linesAbove":"1","linesBelow":"24","currentFilePath":"/public/index.html","viewableBlogText":" ","commentTags":["image"],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2617","displayCommentEventSequenceNumber":2617},{"id":"commentId-12","developerGroupId":"devGroupId-2","timestamp":1612484641689,"commentText":"This code to query the GraphQL server is running dynamically in the browser. Sometimes, you will want to execute a query on your server and embed the response into a static web page. This is what I will show next.

In order to do this I will use the handlebars templating engine and a simple GraphQL client called graphql-request. The first step will be install these packages:

> npm add express-handlebars graphql-request","selectedCodeBlocks":[],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"3","linesBelow":"3","currentFilePath":"/public/index.html","viewableBlogText":"","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2617","displayCommentEventSequenceNumber":2617}],"ev-2690":[{"id":"commentId-13","developerGroupId":"devGroupId-2","timestamp":1612484655887,"commentText":"
This is what my package.json looks like after the install of the new packages.

Next, I'll set up handlebars and then work on using the GraphQL client.
","selectedCodeBlocks":[{"fileId":"fileId-0","selectedText":"\"express-handlebars\": \"^3.1.0\",\n \"graphql-request\": \"^1.8.2\",","startRow":13,"startColumn":6,"endRow":14,"endColumn":34,"selectedTextEventIds":["ev-2625","ev-2626","ev-2627","ev-2628","ev-2629","ev-2630","ev-2631","ev-2632","ev-2633","ev-2634","ev-2635","ev-2636","ev-2637","ev-2638","ev-2639","ev-2640","ev-2641","ev-2642","ev-2643","ev-2644","ev-2645","ev-2646","ev-2647","ev-2648","ev-2649","ev-2650","ev-2651","ev-2652","ev-2653","ev-2654","ev-2655","ev-2656","ev-2657","ev-2658","ev-2659","ev-2660","ev-2689","ev-2690","ev-2661","ev-2662","ev-2663","ev-2664","ev-2665","ev-2666","ev-2667","ev-2668","ev-2669","ev-2670","ev-2671","ev-2672","ev-2673","ev-2674","ev-2675","ev-2676","ev-2677","ev-2678","ev-2679","ev-2680","ev-2681","ev-2682","ev-2683","ev-2684","ev-2685","ev-2686","ev-2687","ev-2688","ev-264"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"13","linesBelow":"3","currentFilePath":"/package.json","viewableBlogText":"{\n \"name\": \"root\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n },\n \"keywords\": [],\n \"author\": \"\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"express\": \"^4.17.1\",\n \"express-handlebars\": \"^3.1.0\",\n \"graphql-request\": \"^1.8.2\",\n \"morgan\": \"^1.9.1\"\n }\n }","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-2690","displayCommentEventSequenceNumber":2690}],"ev-3492":[{"id":"commentId-14","developerGroupId":"devGroupId-2","timestamp":1612483235613,"commentText":"I start by adding the handlebars middleware inside index.js and set the default layout to be main.handlebars.","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"const handlebars = require('express-handlebars').create({defaultLayout: 'main'});\n\napp.engine('handlebars', handlebars.engine);\napp.set('view engine', 'handlebars');","startRow":6,"startColumn":0,"endRow":9,"endColumn":37,"selectedTextEventIds":["ev-2691","ev-2692","ev-2693","ev-2694","ev-2695","ev-2696","ev-2697","ev-2698","ev-2699","ev-2700","ev-2701","ev-2702","ev-2703","ev-2704","ev-2705","ev-2706","ev-2707","ev-2708","ev-2709","ev-2710","ev-2711","ev-2712","ev-2713","ev-2714","ev-2715","ev-2716","ev-2717","ev-2718","ev-2719","ev-2720","ev-2721","ev-2722","ev-2723","ev-2724","ev-2725","ev-2726","ev-2727","ev-2728","ev-2729","ev-2730","ev-2731","ev-2732","ev-2733","ev-2734","ev-2735","ev-2736","ev-2737","ev-2738","ev-2739","ev-2740","ev-2741","ev-2742","ev-2743","ev-2744","ev-2745","ev-2746","ev-2747","ev-2748","ev-2749","ev-2750","ev-2751","ev-2752","ev-2753","ev-2754","ev-2755","ev-2756","ev-2757","ev-2758","ev-2759","ev-2760","ev-2761","ev-2762","ev-2763","ev-2764","ev-2765","ev-2766","ev-2767","ev-2768","ev-2769","ev-2770","ev-2771","ev-2772","ev-2773","ev-2774","ev-2775","ev-2776","ev-2777","ev-2778","ev-2779","ev-2780","ev-2781","ev-2782","ev-2783","ev-2784","ev-2785","ev-2786","ev-2787","ev-2788","ev-2789","ev-2790","ev-2791","ev-2792","ev-2793","ev-2794","ev-2795","ev-2796","ev-2797","ev-2798","ev-2799","ev-2800","ev-2801","ev-2802","ev-2803","ev-2804","ev-2805","ev-2806","ev-2807","ev-2808","ev-2809","ev-2810","ev-2811","ev-2812","ev-2813","ev-2814","ev-2815","ev-2816","ev-2817","ev-2818","ev-2819","ev-2820","ev-2821","ev-2822","ev-2823","ev-2824","ev-2825","ev-2826","ev-2827","ev-2828","ev-2829","ev-2830","ev-2831","ev-2832","ev-2833","ev-2834","ev-2835","ev-2836","ev-2837","ev-2838","ev-2839","ev-2840","ev-2841","ev-2842","ev-2843","ev-2844","ev-2845","ev-2846","ev-2847","ev-2848","ev-2849","ev-2850","ev-2851","ev-2852","ev-2853","ev-2854","ev-2855","ev-2856"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"6","linesBelow":"10","currentFilePath":"/index.js","viewableBlogText":"'use strict'\n\nconst express = require('express');\nconst morgan = require('morgan');\n\nconst app = express();\nconst handlebars = require('express-handlebars').create({defaultLayout: 'main'});\n\napp.engine('handlebars', handlebars.engine);\napp.set('view engine', 'handlebars'); \n\napp.use(morgan('dev'));\n\napp.use(express.static('public'));\n\napp.use((req, res) => {\n res.status(404).send(`

Uh Oh!

Sorry ${req.url} cannot be found here

`);\n});\n\napp.listen(53140, () => console.log('The server is up and running...'));","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-3492","displayCommentEventSequenceNumber":3492},{"id":"commentId-15","developerGroupId":"devGroupId-2","timestamp":1612483215607,"commentText":"Next, I create a layout file for the pages in the app. I created a directory called 'views' and then another inside it called 'layouts'. This file, main.handlebars, is inside the 'layout' directory. It is a simple bootstrap page with a body that will be filled in by my express routes.","selectedCodeBlocks":[{"fileId":"fileId-3","selectedText":"{{{body}}}","startRow":13,"startColumn":12,"endRow":13,"endColumn":22,"selectedTextEventIds":["ev-3448","ev-3449","ev-3450","ev-3451","ev-3452","ev-3453","ev-3454","ev-3455","ev-3456","ev-3457","ev-3458"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"13","linesBelow":"3","currentFilePath":"/views/layouts/main.handlebars","viewableBlogText":"\n\n \n \n \n \n Student Registration\n \n \n
\n

Student Registration System

\n
\n\n {{{body}}}\n
\n \n","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-3492","displayCommentEventSequenceNumber":3492}],"ev-4286":[{"id":"commentId-16","developerGroupId":"devGroupId-2","timestamp":1612484692580,"commentText":"I will be using a GraphQL client from my express server to make it easier to issue requests to my GraphQL server.

graphql-request is a very basic client. There are other more sophisticated GraphQL clients like Apollo and Relay that help with things like caching (which is important when you do things like use paging to display results), and networking code (avoiding managing calls to fetch yourself).","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"const { request } = require('graphql-request');","startRow":4,"startColumn":0,"endRow":4,"endColumn":47,"selectedTextEventIds":["ev-3493","ev-3494","ev-3495","ev-3496","ev-3497","ev-3498","ev-3499","ev-3500","ev-3501","ev-3502","ev-3503","ev-3504","ev-3505","ev-3506","ev-3507","ev-3508","ev-3509","ev-3510","ev-3511","ev-3512","ev-3513","ev-3514","ev-3515","ev-3516","ev-3517","ev-3518","ev-3519","ev-3520","ev-3521","ev-3522","ev-3523","ev-3524","ev-3525","ev-3526","ev-3527","ev-3528","ev-3529","ev-3530","ev-3531","ev-3532","ev-3533","ev-3534","ev-3535","ev-3536","ev-3537","ev-3538","ev-3539","ev-3540"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"2","linesBelow":"1","currentFilePath":"/index.js","viewableBlogText":"const express = require('express');\nconst morgan = require('morgan');\nconst { request } = require('graphql-request');\n","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-17","developerGroupId":"devGroupId-2","timestamp":1612483561835,"commentText":"Here I set up a route to handle requests for all the students' schedules. The client will specify the semester and year as route parameters.","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"app.get('/studentSchedules/:semester/:year'","startRow":16,"startColumn":0,"endRow":16,"endColumn":43,"selectedTextEventIds":["ev-3542","ev-3543","ev-3544","ev-3545","ev-3546","ev-3547","ev-3548","ev-3549","ev-3550","ev-3551","ev-3552","ev-3553","ev-3554","ev-3555","ev-3556","ev-3557","ev-3558","ev-3559","ev-3560","ev-3561","ev-3562","ev-3563","ev-3564","ev-3565","ev-3566","ev-3567","ev-3568","ev-3569","ev-3570","ev-3571","ev-3572","ev-3573","ev-3574","ev-3575","ev-3576","ev-3577","ev-3578","ev-3579","ev-3580","ev-3581","ev-3582","ev-3583","ev-3584","ev-3585"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"0","linesBelow":"20","currentFilePath":"/index.js","viewableBlogText":"app.get('/studentSchedules/:semester/:year', async (req, res) => {\n \n const semester = req.params.semester;\n const year = Number(req.params.year);\n\n const query = `{\n students {\n lastName\n firstName\n courses(semester: \"${semester}\", year: ${year}) {\n courseName\n semester\n year\n }\n }\n }`\n \n const response = await request('http://localhost:4000', query);\n console.log(response);\n res.render('studentSchedules', {response});\n});","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-18","developerGroupId":"devGroupId-2","timestamp":1612483601314,"commentText":"Here I retrieve the semester and year from the request and store them in variables.","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"const semester = req.params.semester;\n const year = Number(req.params.year);","startRow":18,"startColumn":4,"endRow":19,"endColumn":41,"selectedTextEventIds":["ev-3618","ev-3619","ev-3620","ev-3621","ev-3622","ev-3623","ev-3624","ev-3625","ev-3626","ev-3627","ev-3628","ev-3629","ev-3630","ev-3631","ev-3632","ev-3633","ev-3634","ev-3635","ev-3636","ev-3637","ev-3638","ev-3639","ev-3640","ev-3641","ev-3642","ev-3643","ev-3644","ev-3645","ev-3646","ev-3647","ev-3648","ev-3649","ev-3650","ev-3651","ev-3652","ev-3653","ev-3654","ev-3655","ev-3656","ev-3657","ev-3658","ev-3659","ev-3660","ev-3661","ev-3662","ev-3663","ev-3664","ev-3665","ev-3666","ev-3667","ev-3668","ev-3669","ev-3670","ev-3671","ev-3672","ev-3673","ev-3674","ev-3675","ev-3676","ev-3677","ev-3678","ev-3679","ev-3680","ev-3681","ev-3682","ev-3683","ev-3684","ev-3685","ev-3686","ev-3687","ev-3688","ev-3689","ev-3690","ev-3691","ev-3692","ev-3693","ev-3694","ev-3695","ev-3696","ev-3697"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"2","linesBelow":"17","currentFilePath":"/index.js","viewableBlogText":"app.get('/studentSchedules/:semester/:year', async (req, res) => {\n \n const semester = req.params.semester;\n const year = Number(req.params.year);\n\n const query = `{\n students {\n lastName\n firstName\n courses(semester: \"${semester}\", year: ${year}) {\n courseName\n semester\n year\n }\n }\n }`\n \n const response = await request('http://localhost:4000', query);\n console.log(response);\n res.render('studentSchedules', {response});\n});","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-19","developerGroupId":"devGroupId-2","timestamp":1612483631376,"commentText":"Next, I create a query to get all of the students and their schedules in a certain year and semester.","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"const query = `{\n students {\n lastName\n firstName\n courses(semester: \"${semester}\", year: ${year}) {\n courseName\n semester\n year\n }\n }\n }`","startRow":21,"startColumn":4,"endRow":31,"endColumn":6,"selectedTextEventIds":["ev-3703","ev-3704","ev-3705","ev-3706","ev-3707","ev-3708","ev-3709","ev-3710","ev-3711","ev-3712","ev-3713","ev-3714","ev-3715","ev-3716","ev-3717","ev-3718","ev-3719","ev-3720","ev-3721","ev-3722","ev-3723","ev-3724","ev-3725","ev-3726","ev-3727","ev-3728","ev-3729","ev-3730","ev-3731","ev-3732","ev-3733","ev-3734","ev-3735","ev-3736","ev-3737","ev-3738","ev-3739","ev-3740","ev-3741","ev-3742","ev-3743","ev-3744","ev-3745","ev-3746","ev-3747","ev-3748","ev-3749","ev-3750","ev-3751","ev-3752","ev-3753","ev-3754","ev-3755","ev-3756","ev-3757","ev-3758","ev-3759","ev-3760","ev-3761","ev-3762","ev-3763","ev-3764","ev-3765","ev-3766","ev-3767","ev-3768","ev-3769","ev-3770","ev-3771","ev-3772","ev-3773","ev-3774","ev-3775","ev-3776","ev-3777","ev-3778","ev-3779","ev-3780","ev-3781","ev-3782","ev-3783","ev-3784","ev-3785","ev-3786","ev-3787","ev-3788","ev-3789","ev-3790","ev-3791","ev-3792","ev-3793","ev-3794","ev-3795","ev-3796","ev-3797","ev-3798","ev-3799","ev-3800","ev-3801","ev-3802","ev-3803","ev-3804","ev-3805","ev-3806","ev-3807","ev-3808","ev-3809","ev-3810","ev-3811","ev-3812","ev-3813","ev-3814","ev-3815","ev-3816","ev-3817","ev-3818","ev-3819","ev-3820","ev-3821","ev-3822","ev-3823","ev-3824","ev-3825","ev-3826","ev-3827","ev-3828","ev-3829","ev-3830","ev-3831","ev-3832","ev-3833","ev-3834","ev-3835","ev-3836","ev-3837","ev-3838","ev-3839","ev-3840","ev-3841","ev-3842","ev-3843","ev-3844","ev-3845","ev-3846","ev-3847","ev-3848","ev-3849","ev-3850","ev-3851","ev-3852","ev-3853","ev-3854","ev-3855","ev-3856","ev-3857","ev-3858","ev-3859","ev-3860","ev-3861","ev-3862","ev-3863","ev-3864","ev-3865","ev-3866","ev-3867","ev-3868","ev-3869","ev-3870","ev-3871","ev-3872","ev-3873","ev-3874","ev-3875","ev-3876","ev-3877","ev-3878","ev-3879","ev-3880","ev-3881","ev-3882","ev-3883","ev-3884","ev-3885","ev-3886","ev-3887","ev-3888","ev-3889","ev-3890","ev-3891","ev-3892","ev-3893","ev-3894","ev-3895","ev-3896","ev-3897","ev-3898","ev-3899","ev-3900","ev-3901","ev-3902","ev-3903","ev-3904","ev-3905","ev-3906","ev-3907","ev-3908","ev-3909","ev-3910","ev-3911","ev-3912","ev-3913","ev-3914","ev-3915","ev-3916","ev-3917","ev-3918","ev-3919","ev-3920","ev-3921","ev-3922","ev-3923","ev-3924","ev-3925","ev-3926","ev-3927","ev-3928","ev-3929","ev-3930","ev-3931","ev-3932","ev-3933","ev-3934","ev-3935","ev-3936","ev-3937","ev-3938","ev-3939","ev-3940","ev-3941","ev-3942","ev-3943","ev-3944","ev-3945","ev-3946","ev-3947"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"5","linesBelow":"5","currentFilePath":"/index.js","viewableBlogText":"app.get('/studentSchedules/:semester/:year', async (req, res) => {\n \n const semester = req.params.semester;\n const year = Number(req.params.year);\n\n const query = `{\n students {\n lastName\n firstName\n courses(semester: \"${semester}\", year: ${year}) {\n courseName\n semester\n year\n }\n }\n }`\n \n const response = await request('http://localhost:4000', query);\n console.log(response);\n res.render('studentSchedules', {response});\n});","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-20","developerGroupId":"devGroupId-2","timestamp":1612483693198,"commentText":"To keep things simple I plug in the semester and year values right into the string.","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"semester: \"${semester}\", year: ${year}","startRow":25,"startColumn":20,"endRow":25,"endColumn":58,"selectedTextEventIds":["ev-3802","ev-3803","ev-3804","ev-3805","ev-3806","ev-3807","ev-3808","ev-3809","ev-3810","ev-3811","ev-3812","ev-3813","ev-3814","ev-3815","ev-3816","ev-3817","ev-3818","ev-3819","ev-3820","ev-3821","ev-3822","ev-3823","ev-3824","ev-3825","ev-3826","ev-3827","ev-3828","ev-3829","ev-3830","ev-3831","ev-3832","ev-3833","ev-3834","ev-3835","ev-3836","ev-3837","ev-3838","ev-3839","ev-3840"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"4","linesBelow":"6","currentFilePath":"/index.js","viewableBlogText":" const query = `{\n students {\n lastName\n firstName\n courses(semester: \"${semester}\", year: ${year}) {\n courseName\n semester\n year\n }\n }\n }`","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-21","developerGroupId":"devGroupId-2","timestamp":1612483759729,"commentText":"Next, I use the graphql-request object that I required on line 5 called, request, to access the GraphQL server. I pass the query variable as a parameter and the GraphQL client manages the call and unwrapping the response.","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"request('http://localhost:4000', query);","startRow":33,"startColumn":27,"endRow":33,"endColumn":67,"selectedTextEventIds":["ev-3978","ev-3979","ev-3980","ev-3981","ev-3982","ev-3983","ev-3984","ev-3985","ev-3986","ev-3987","ev-3988","ev-3989","ev-3990","ev-3991","ev-3992","ev-3993","ev-3994","ev-3995","ev-3996","ev-3997","ev-3998","ev-3999","ev-4000","ev-4001","ev-4002","ev-4003","ev-4004","ev-4005","ev-4006","ev-4007","ev-4008","ev-4009","ev-4010","ev-4011","ev-4012","ev-4013","ev-4014","ev-4015","ev-4016","ev-4017","ev-4018"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"17","linesBelow":"3","currentFilePath":"/index.js","viewableBlogText":"app.get('/studentSchedules/:semester/:year', async (req, res) => {\n \n const semester = req.params.semester;\n const year = Number(req.params.year);\n\n const query = `{\n students {\n lastName\n firstName\n courses(semester: \"${semester}\", year: ${year}) {\n courseName\n semester\n year\n }\n }\n }`\n \n const response = await request('http://localhost:4000', query);\n console.log(response);\n res.render('studentSchedules', {response});\n});","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-22","developerGroupId":"devGroupId-2","timestamp":1612483834082,"commentText":"
This function returns a promise so I can use await to simplify the code.

The client turns the response string into an object for me and I store it in the variable called response. This is the object referred to as data in the GraphQL response.
","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"await","startRow":33,"startColumn":21,"endRow":33,"endColumn":26,"selectedTextEventIds":["ev-3972","ev-3973","ev-3974","ev-3975","ev-3976","ev-3977"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"17","linesBelow":"3","currentFilePath":"/index.js","viewableBlogText":"app.get('/studentSchedules/:semester/:year', async (req, res) => {\n \n const semester = req.params.semester;\n const year = Number(req.params.year);\n\n const query = `{\n students {\n lastName\n firstName\n courses(semester: \"${semester}\", year: ${year}) {\n courseName\n semester\n year\n }\n }\n }`\n \n const response = await request('http://localhost:4000', query);\n console.log(response);\n res.render('studentSchedules', {response});\n});","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-23","developerGroupId":"devGroupId-2","timestamp":1612483888362,"commentText":"Now, to display the results I'll create a handlebars view called studentSchedules.handlebars inside my 'views' directory. I pass in the response object which has a property called students that refers to an array of students.","selectedCodeBlocks":[{"fileId":"fileId-1","selectedText":"res.render('studentSchedules', {response});","startRow":35,"startColumn":4,"endRow":35,"endColumn":47,"selectedTextEventIds":["ev-4050","ev-4051","ev-4052","ev-4053","ev-4054","ev-4055","ev-4056","ev-4057","ev-4058","ev-4059","ev-4060","ev-4061","ev-4062","ev-4063","ev-4064","ev-4065","ev-4066","ev-4067","ev-4068","ev-4069","ev-4070","ev-4071","ev-4072","ev-4073","ev-4074","ev-4075","ev-4076","ev-4077","ev-4078","ev-4079","ev-4080","ev-4081","ev-4082","ev-4083","ev-4084","ev-4085","ev-4086","ev-4087","ev-4088","ev-4089","ev-4090","ev-4091","ev-4092","ev-4093"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"19","linesBelow":"1","currentFilePath":"/index.js","viewableBlogText":"app.get('/studentSchedules/:semester/:year', async (req, res) => {\n \n const semester = req.params.semester;\n const year = Number(req.params.year);\n\n const query = `{\n students {\n lastName\n firstName\n courses(semester: \"${semester}\", year: ${year}) {\n courseName\n semester\n year\n }\n }\n }`\n \n const response = await request('http://localhost:4000', query);\n console.log(response);\n res.render('studentSchedules', {response});\n});","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-24","developerGroupId":"devGroupId-2","timestamp":1612483923132,"commentText":"Inside studentSchedules.handlebars the outer loop extracts each student object from the passed in array called students.","selectedCodeBlocks":[{"fileId":"fileId-4","selectedText":"{{#each response/students}}","startRow":0,"startColumn":0,"endRow":0,"endColumn":27,"selectedTextEventIds":["ev-4099","ev-4100","ev-4101","ev-4102","ev-4103","ev-4104","ev-4105","ev-4106","ev-4107","ev-4108","ev-4109","ev-4110","ev-4111","ev-4112","ev-4113","ev-4114","ev-4115","ev-4116","ev-4117","ev-4118","ev-4119","ev-4120","ev-4121","ev-4122","ev-4123","ev-4124","ev-4125","ev-4126"]},{"fileId":"fileId-4","selectedText":"{{/each}}","startRow":7,"startColumn":0,"endRow":7,"endColumn":9,"selectedTextEventIds":["ev-4278","ev-4279","ev-4280","ev-4281","ev-4282","ev-4283","ev-4284","ev-4285","ev-4286"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"0","linesBelow":"0","currentFilePath":"/views/studentSchedules.handlebars","viewableBlogText":"{{#each response/students}}\n {{this/firstName}} {{this/lastName}}
\n Courses:
\n {{#each this/courses}}\n {{this/courseName}}
\n {{/each}}\n
\n{{/each}}","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-25","developerGroupId":"devGroupId-2","timestamp":1612483949594,"commentText":"I extract the first and last name from the student object.","selectedCodeBlocks":[{"fileId":"fileId-4","selectedText":"{{this/firstName}} {{this/lastName}}","startRow":1,"startColumn":4,"endRow":1,"endColumn":40,"selectedTextEventIds":["ev-4131","ev-4132","ev-4133","ev-4134","ev-4135","ev-4136","ev-4137","ev-4138","ev-4139","ev-4140","ev-4141","ev-4142","ev-4143","ev-4144","ev-4145","ev-4146","ev-4147","ev-4148","ev-4149","ev-4150","ev-4151","ev-4152","ev-4153","ev-4154","ev-4155","ev-4156","ev-4157","ev-4158","ev-4159","ev-4160","ev-4161","ev-4162","ev-4163","ev-4164","ev-4165","ev-4166","ev-4167"]}],"imageURLs":[],"videoURLs":[],"audioURLs":[],"linesAbove":"1","linesBelow":"6","currentFilePath":"/views/studentSchedules.handlebars","viewableBlogText":"{{#each response/students}}\n {{this/firstName}} {{this/lastName}}
\n Courses:
\n {{#each this/courses}}\n {{this/courseName}}
\n {{/each}}\n
\n{{/each}}","commentTags":[],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286},{"id":"commentId-26","developerGroupId":"devGroupId-2","timestamp":1612484001189,"commentText":"Then I create an inner loop that displays each student's courses. See the attached screenshot (it is displaying the student schedules that are currently in the database).","selectedCodeBlocks":[{"fileId":"fileId-4","selectedText":"{{#each this/courses}}\n {{this/courseName}}
\n {{/each}}","startRow":3,"startColumn":4,"endRow":5,"endColumn":13,"selectedTextEventIds":["ev-4197","ev-4198","ev-4199","ev-4200","ev-4201","ev-4202","ev-4203","ev-4204","ev-4205","ev-4206","ev-4207","ev-4208","ev-4209","ev-4210","ev-4211","ev-4212","ev-4213","ev-4214","ev-4215","ev-4216","ev-4217","ev-4218","ev-4219","ev-4220","ev-4221","ev-4222","ev-4223","ev-4224","ev-4225","ev-4226","ev-4227","ev-4228","ev-4229","ev-4230","ev-4231","ev-4232","ev-4233","ev-4234","ev-4235","ev-4236","ev-4237","ev-4238","ev-4239","ev-4240","ev-4241","ev-4242","ev-4243","ev-4244","ev-4245","ev-4246","ev-4247","ev-4248","ev-4249","ev-4250","ev-4251","ev-4252","ev-4253","ev-4254","ev-4255","ev-4256","ev-4257","ev-4258","ev-4259","ev-4260","ev-4261","ev-4262","ev-4263","ev-4264","ev-4265","ev-4266","ev-4267"]}],"imageURLs":["/media/images/pb625-1612483994769-image.png"],"videoURLs":[],"audioURLs":[],"linesAbove":"3","linesBelow":"2","currentFilePath":"/views/studentSchedules.handlebars","viewableBlogText":"{{#each response/students}}\n {{this/firstName}} {{this/lastName}}
\n Courses:
\n {{#each this/courses}}\n {{this/courseName}}
\n {{/each}}\n
\n{{/each}}","commentTags":["image"],"questionCommentData":null,"commentTitle":"","displayCommentEventId":"ev-4286","displayCommentEventSequenceNumber":4286}]}; playbackData.numEvents = 4287; playbackData.isEditable = false; playbackData.developers = {"devId-0":{"id":"devId-0","userName":"Storyteller System","email":"system@ourcodestories.com","avatarURL":"https://www.gravatar.com/avatar/5fcc05d044610e96c28c9bb4b7278935"},"devId-1":{"id":"devId-1","userName":"Anonymous Developer","email":"anon@ourcodestories.com","avatarURL":"https://www.gravatar.com/avatar/265e214b9c99f4d4f703c6feb9d8652f"},"devId-2":{"id":"devId-2","userName":"Mark Mahoney","email":"mmahoney@carthage.edu","avatarURL":"https://www.gravatar.com/avatar/8f406804248006f79761e9ebc39d414c"}}; playbackData.developerGroups = {"devGroupId-0":{"id":"devGroupId-0","memberIds":["devId-0"]},"devGroupId-1":{"id":"devGroupId-1","memberIds":["devId-1"]},"devGroupId-2":{"id":"devGroupId-2","memberIds":["devId-2"]}}; playbackData.playbackTitle = 'Accessing a GraphQL Server Using fetch() and graphql-request'; playbackData.branchId = 'S7aIdB'; playbackData.estimatedReadTime = 22; }