Format issue with Generated

We are using Generated to type our queries in the frontend (React).
Unfortunately, we cannot format nicely our queries in the frontend using prettier.

Here you have the issue:

We have been trying to use sql = String.raw which format correctly but generated get lost as the query string is different.

See details:

As our codebase is getting bigger and bigger, formatting is becoming a real issue to maintain our git version control correctly.

Any recommendation?

Hi @alan345 :wave: not sure what might be going on here. Can you give me more information about your code generation setup? The package name, version, config details?

Hey @JeffAuriemma

I can provide these information but it is not a bug.
I’m just trying to find a way to format the query.

This solution works. it indents automatically, but the query is not valid anymore

Thanks - the gql function turns the GraphQL document, which is a string, into an AST, so reassigning that name to a different function will definitely break your app. Can you share more info about your code generation/formatting setup?

In the frontend:

"dependencies": {
  "@apollo/client": "3.7.3",
  "graphql": "16.6.0",

"devDependencies": {
    "@graphql-codegen/cli": "2.14.1",
    "@graphql-codegen/client-preset": "1.1.5",

to compile the frontend:

"scripts": {
   "compile": "graphql-codegen",

We are using to format the code.

To summarize, this is working perfectly, but the formatting is not working

import { gql } from '__generated__'
const QUERY = gql(`
  query Companie($where: CompanieWhereUniqueInput!) {
    companie(where: $where) {

This is formatting well but as you said, not working as we are reassigning to a different function

import { gql as gqlGenerated } from '__generated__'
const gql = String.raw

const QUERY = gqlGenerated(gql`
  query Companie($where: CompanieWhereUniqueInput!) {
    companie(where: $where) {

Thanks! Have you tried the steps listed in these docs?

Apologies if you’ve already done this, just trying to narrow down what might be going on. Thanks!

1 Like