Format issue with Generated

Help
1

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:

image
image1704×598 56.6 KB

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

See details:
https://private-user-images.githubusercontent.com/15246526/265144891-7fa63c1d-1136-4cd7-80ca-0e6c2e5655ef.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDM2Mzg4OTUsIm5iZiI6MTcwMzYzODU5NSwicGF0aCI6Ii8xNTI0NjUyNi8yNjUxNDQ4OTEtN2ZhNjNjMWQtMTEzNi00Y2Q3LTgwY2EtMGU2YzJlNTY1NWVmLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFJV05KWUFYNENTVkVINTNBJTJGMjAyMzEyMjclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjMxMjI3VDAwNTYzNVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWRkNTczYjQ5ZTM4MDEzMGIxNTRjZmIwYjExMmJhNGU0OTY0Y2EwMjNjYjgxN2UyNzc2ODA5ZjhlMmQzYmJlYTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.MgDTOL4t1QNgQSlok3dYxQl28Hp1hYFTBKp1NYr2eTA

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

Any recommendation?

2

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?

3

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

image
image2482×1804 302 KB

4

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?

5

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 prettier.io 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) {
      id
    }
  }
`)

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) {
      id
    }
  }
`)
6

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