CODEWITHSUNDEEP
javascriptgraphqlgraphql-js
Terion
Terion

Reputation: 2506

GraphQL: build query arguments from object

If I have an object:

{"where":{"publishedAt_lt":"2018-01-01"}}

How can I convert it to a string suitable for query arguments?

articles(where: {publishedAt_lt: "2018-01-01"})

Upvotes: 7

Views: 9395

Answers (4)

daKmoR
daKmoR

Reputation: 1864

I took KMcAloon approach and made it also support array. That way you can fully make your query as an object and in the last step wrap it => for example

mutation createPackage {
  createPackage(
    data: ${queryfy(data)}
  ) {
    name
    _id
  })
}


/**
 * Queryfy.
 *
 * Prep javascript objects for interpolation within graphql queries.
 *
 * @param {mixed} obj
 * @return template string.
 */
const queryfy = obj => {
  // Make sure we don't alter integers.
  if (typeof obj === 'number') {
    return obj;
  }

  if (Array.isArray(obj)) {
    const props = obj.map(value => `${queryfy(value)}`).join(',');
    return `[${props}]`;
  }

  if (typeof obj === 'object') {
    const props = Object.keys(obj)
      .map(key => `${key}:${queryfy(obj[key])}`)
      .join(',');
    return `{${props}}`;
  }

  return JSON.stringify(obj);
};

Upvotes: 3

henry74
henry74

Reputation: 1043

Try this:

const { where } = {"where":{"publishedAt_lt":"2018-01-01"}}
articleList = articles({where}) // assume articles takes an object - equivalent to articles({where: where}) or articles({where: {publishedAt_lt: "2018-01-01"}}

Upvotes: -1

KMcAloon
KMcAloon

Reputation: 688

This looks like an interesting library, I would suggest checking it out:

https://www.npmjs.com/package/json-to-graphql-query

But basically all we need to do is to convert the object to a string while ensuring the keys do not adopt double quotes and integers are not converted into strings, as that might not play well with the graphql schemas we're working with.

Since JSON.stringify() won't accomplish this, I came up with this little function to help with interpolating arguments into my queries:

/**
 * Queryfy.
 *
 * Prep javascript objects for interpolation within graphql queries.
 *
 * @param {mixed} obj
 * @return template string.
 */
const queryfy = obj => {

  // Make sure we don't alter integers.
  if( typeof obj === 'number' ) {
    return obj;
  }

  // Stringify everything other than objects.
  if( typeof obj !== 'object' || Array.isArray( obj ) ) {
    return JSON.stringify( obj );
  }

  // Iterate through object keys to convert into a string
  // to be interpolated into the query.
  let props = Object.keys( obj ).map( key =>
    `${key}:${queryfy( obj[key] )}`
  ).join( ',' );

  return `{${props}}`;

}

Here is a reduced portion of my code where I am using this successfully:

const dateQuery = {};

if( !! date1 ) {

  dateQuery.after = {
    year: parseInt( date1.format( 'YYYY' ) ),
    month: parseInt( date1.format( 'M' ) ),
    day: date1.format( 'D' ) - 1,
  }

}
if( !! date2 ) {

  dateQuery.before = {
    year: parseInt( date2.format( 'YYYY' ) ),
    month: parseInt( date2.format( 'M' ) ),
    day: date2.format( 'D' ) - 1,
  }

}

const query = await client.query( {
  query: gql `{
    apiResponses( where: {
      dateQuery: ${queryfy( dateQuery )}
    } ) {
      edges {
        node {
          apiResponseId
          title
          date
          json
        }
      }
    }
  }`
} );

That being said, I am going to check out the library mentioned and probably use that moving forward.

Upvotes: 13

Herku
Herku

Reputation: 7666

this is not answering your question but your question should usually not come up if you follow best practices: GraphQL queries should be static - that means you don't generate them from a variable input. Maybe you have a valid use case for this but I can hardly imagine any. Please let me know in the comments.

When your client has a variable input for a field argument you want to use variables instead:

query getArticles($filter: ArticlesFilter) { # Please insert your input type name
  articles(where: $filter) {
    # ...
  }
}

You can then pass in this input in the variables field of the query:

let givenObject = {"where":{"publishedAt_lt":"2018-01-01"}}; // said object
fetch('/graphql', {
  method: 'POST',
  body: JSON.stringify({
    query, // put the query string from above
    variables: {
      filter: givenObject,
    },
  }),
});

This is now plain JS, please refer to your client side library. I am sure they have a docs section about that. For react-apollo you can find the docs how to pass variables here.

Upvotes: 1

Related Questions