GraphQL: build query arguments from object

Question

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"})

Godinez

That's exactly what you already have? The quotes around a key (in this instance) are meaningless. – Delaunay

This is an example. I have a simple JS object, that is coming from outside and I need to convert it to gql argument – Godinez

can you post your full query – Chaumont

Answer 1

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.

Utricle

It's a more complex task with many nuances. I know that lib — I've contributed there. In fact there was my own answer to this question with link to this library, but moderator stackoverflow.com/users/4099593/bhargav-rao deleted it with no reason – Godinez

Answer 2

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);
};

Abana

Answer 3

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.

Micropaleontology

yes, I have a valid usecase: transforming variables in server resolvers built on top of other graphql host – Godinez

Answer 4

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"}}

Battista