title: GraphQL: Writing Frontend Query with Optional Arguments
body: <p>I am currently trying to write a GraphQL Query called <strong>recipe</strong> which can take a number of optional arguments based on a graphQL input called RecipeSearchInput, and uses the input to find a specific recipe matching the attributes passed.</p>
  <p>I am struggling to write the frontend query to be able to be able to take the arguments as an object.</p>
  <p>Here's my graphQl schema for graphql input RecipeSearchInput.</p>
  <pre class="lang-js prettyprint-override"><code>     input RecipeSearchInput {
    _id: ID
    title: String
    cookTime: Int
    prepTime: Int
    tools: [String!]
    ingredients: [String!]
    steps: [String!]
    videoURL: String
    tags: [String!]
    country: String
  }
  </code></pre>
  
  <p>And here's my query written in the frontend to access the my mongodb server through graphql:</p>
  <pre class="lang-js prettyprint-override"><code>// gql query that requests a recipe
  export const findOne = obj =&gt; {
    let requestBody = {
      query: `
                query {
                  recipe(recipeInput: ${obj}) {
                    _id
                    title
                    cookTime
                    prepTime
                    tools
                    ingredients
                    steps
                    videoURL
                    tags
                    country
                  }
                }
              `
    };
  
    return fetchEndpoint(requestBody);
  };
  </code></pre>
  
  <p>When I wrote my frontend query with a simple object that I knew existed in my database:</p>
  <pre class="lang-js prettyprint-override"><code>const displayData = async () =&gt; {
      const recipeData = await api.recipe.findOne({
        title: &quot;Greek Chicken Skewers&quot;
      });
  
      console.log(recipeData);
    };
  </code></pre>
  
  <p>This gives me the following error:</p>
  <pre><code>message: &quot;Expected value of type &quot;RecipeSearchInput&quot;, found [object, Object].&quot;
  </code></pre>
  <p>The problem I'm seeing is that <strong>obj</strong> is not formatted properly (in String form) to be received by Graphql as an input. The Graphql query params look like this:</p>
  <p><a href="https://i.stack.imgur.com/b0obI.png" rel="nofollow noreferrer">Here is what the working query looks like</a></p>
  <p><strong>What's the best approach for making a query that takes more than one argument?</strong> How should I package up the argument in the frontend to please GraphQL?</p>
  <p>Thanks in advance, and please let me know if any of this was unclear!</p>
  <p>Shawn</p>