title: How do you submit an API request from the front-end based on the result of a previous API request on an Apollo graphql server?
body: <p>I'm working with two API endpoints.  The first one returns a list of dates in a string format for which data is available.  The date can then be added to the second endpoint and renders additional data. On the Graphql Playground I have been able to make it all work.  On the front-end I have a select option drop down for the dates, but I have not been able to fire off the second API call when I click on any given date.  It's the first time I'm using graphql mutation and I haven't been able to get the second API request to return any data when I select a date.  Thank you.</p>
  
  <p>Front-end code:</p>
  
  <p><strong><em>app.tsx</em></strong></p>
  
  <pre><code>
  import * as React from 'react'
  import { useState } from 'react'
  import { useMutation } from '@apollo/react-hooks'
  import { IrriSatQuery } from '../../generated/graphql'
  import { MAP_LAYER } from './query'
  
  interface Props {
    data: IrriSatQuery;
  }
  
  const IrriSat: React.FC&lt;Props&gt; = ({ data }) =&gt; {
    const [option, setOption] = useState((data?.mapDates as any)[0].date!)
    const [getLayer] = useMutation(MAP_LAYER)
  
    return (
      &lt;&gt;
  
      &lt;ContentWrapper&gt;
        &lt;select value={option} onChange={( e: React.ChangeEvent&lt;HTMLSelectElement&gt;, ): void =&gt; {setOption(e.target.value, getLayer(e.target.value)}} onSelect={() =&gt; getLayer({variables: {type: option}})}&gt;
          {data?.mapDates?.slice(0,52).map(res =&gt; 
            &lt;option key={res?.date!} value={res?.date!}&gt;{res?.date}&lt;/option&gt;
            )
          }
        &lt;/select&gt;
      &lt;/ContentWrapper&gt;
      &lt;/&gt;
    )
  }
  
  export default IrriSat
  </code></pre>
  
  <p><strong><em>query.ts</em></strong></p>
  
  <pre><code>
  export const QUERY_IRR_SAT = gql`
   query IrriSat {
     mapDates {
       date
       dateurl
     }
   }
  `
  
  export const MAP_LAYER = gql`
    mutation MapLayer($date: String!) {
       mapDate(date: $date) {
         token
         mapid
         name
       }
  
     }
  `
  </code></pre>
  
  <p>Back-end code:</p>
  
  <p><strong>server.js</strong></p>
  
  <pre><code>class IrriSatAPI extends RESTDataSource {
    constructor() {
      super();
      this.baseURL = 'https://irrisat-cloud.appspot.com/_ah/api/irrisat/v1/services/'
    }
  
    async getMapsDates() {
      const response = await this.get('maps/dates')
      return Array.isArray(response.items) ? response.items.map(response =&gt; this.mapsDatesReducer(response)) : []
    }
  
    mapsDatesReducer(response) {
      return {
        date: response.date,
        dateurl: response.dateurl,
      }
    }
  
    async getMapsLayer(date) {
  
      const response = await this.get(`maps/layers/${date}`)
      return Array.isArray(response.items) ? response.items.map(response =&gt; this.mapsLayerReducer(response)) : []
    }
  
    mapsLayerReducer(response) {
      return {
        token: response.token,
        mapid: response.mapid,
        name: response.name
      }
    }
  
  
    }
  }
  </code></pre>
  
  <p><strong>schema.js</strong></p>
  
  <pre><code>  type MapDates {
      date: String
      dateurl: String
    }
  
    type Mutation {
      mapDate(date: String): [MapsLayers]
    }
  
    type Query {
      mapDates: [MapDates]
  </code></pre>
  
  <p><strong>resolver.js</strong></p>
  
  <pre><code>module.exports = {
    Query: {
      mapDates: (_, __, { dataSources }) =&gt; dataSources.irriSatAPI.getMapsDates(),
    },
    Mutation: {
      mapDate: (_, { date }, { dataSources }) =&gt; dataSources.irriSatAPI.getMapsLayer(date)
    }
  }
  </code></pre>