Allow to output readable format (no AST)

[slorber]

Hi,

I'd like to know if it is possible to extract the queries in a human readable form, instead of minified AST that is supposed to be shared between client and server.

My usecase is that I have graphql fragments everywhere and I use fragments composition, so it would be useful to be able to output the composed version of my queries so that I can play with the queries in a sandbox like Graphiql. Otherwise I have to do this composition manually and maintain it over time.

Here's the kind of output I'd like to have

query ReportEditionSynthesisShowQuery($reportEditionId: ID!) {
    reportEdition: ReportEdition(id: $reportEditionId) {
        id
        startDate
        endDate
        report {
            id
            name
        }
        contributions: answers {
            id
            ...SynthesisItemContribution
        }
        importantTopicContributions: topicAnswers(filter: {important: true}) {
            ...ImportantItemsTopicContribution
        }
        recipients {
            email
        }
    }
}


fragment ImportantItemsTopicContribution on TopicAnswer {
    id
    content
    contribution: answer {
        id
        user {
            id
            firstName
            lastName
            avatar
        }
    }
}

fragment SynthesisItemContribution on Answer {
    answerType
    user {
        ...SynthesisItemHeaderByUser
    }
    topicContributions: topicAnswers {
        ...SynthesisSectionsTopicContribution
    }
}

fragment SynthesisItemHeaderByUser on User {
    ...UserAlt
}

fragment UserAlt on User {
    id
    firstName
    lastName
    pictureUrl: avatar
    job
    color
    email
}


fragment SynthesisSectionsTopicContribution on TopicAnswer {
    topic {
        id,
        name
    }
    content
}

Here is my query defined in HOC (I did not include subcomponents but I can if needed)

const injectSynthesisData = Comp => {
  return graphql(gql`

      query ReportEditionSynthesisShowQuery($reportEditionId: ID!) {
          reportEdition: ReportEdition(id: $reportEditionId) {
              id
              startDate
              endDate
              report {
                  id
                  name
              }
              contributions: answers {
                  id
                  ...SynthesisItemContribution
              }
              importantTopicContributions: topicAnswers(filter: {important: true}) {
                  ...ImportantItemsTopicContribution
              }
              recipients {
                  email
              }
          }
      }
      
      
      ${ImportantItems.fragments.topicContribution}
      ${SynthesisItem.fragments.contribution}

  `,{
    options: (props) => ({
      variables: {
        reportEditionId: props.match.params.reportEditionId
      }
    }),
  })(Comp)
};

[Poincare]

@slorber Yeah, this should be possible pretty easily. It might be possible to use prettier's support for GraphQL queries in order to pretty print the existing query keys in the JSON map persistgraphql outputs. Could you give this a try and see if it matches your usecase?

[slorber]

Hi,

I'm not sure what you are proposing me to do @Poincare

Anyway I've found a workaroud: the Apollo Chrome extension does allow me to see the "live queries" of a page so I can get my output from there. It may not be "automated" but is good enough for me