Queries of unknown type

[stebbilax]

Hi.

I'm trying get a project up and running with codegen and having some problems I struggle finding fixes for.

One issue I'm having is that, in the example below, the first query will be typed TypeDocumentDode<GetProfileQuery.. etc and work right when imported and placed in a useQuery. The second query will have a type of unknown and thus is unusable. I'm running into this kind of thing quite a bit and I can't seem to figure out the rules governing what the graphql() function will return.

export const GET_PROFILE = graphql(`
    query getProfile($id: String){
        profile(id: $id){
            ...ProfileFragment 
        }
    }
`)

export const GET_PROFILE_ALBUM = graphql(`
    query getProfileAlbum($albumTitle: String, $id: String) {
        profile(id: $id) {
            medialibrary {
                albums(title: $albumTitle){
                    edges {
                        node {
                            title
                            images(sortBy: "-created") {
                                edges {
                                    node {
                                    ...MediaImageLargeFragment
                                    }
                                }
                            }
                        }
                    }
                }
            } 
        }
    }
`)

Another issue is that when receiving the response and using useFragment() to get it typed. In the example above any fields in the ProfileFragment will be properly typed, but any nested fragments within that fragment will not. This makes sense, but I cannot find any examples or documentation on how to handle typing nested fragments.

Any pointers as to what I'm doing that's messing up the magic would be much appreciated.
I am using vue3 with apollo.

const config: CodegenConfig = {
  overwrite: true,
  schema: "myschema",
  // documents: ["./src/apollo/**/*.ts"],
  documents: ["./src/apollo/**/*.ts", "./src/**/*.vue"],
  ignoreNoDocuments: true,
  watch: true,
  watchConfig: {
      usePolling: true,
      interval: 1000
  },
  generates: {
    "./src/apollo/generated/": {
      preset: "client",
      config: {
          useTypeImports: true
      },
      presetConfig: {
          fragmentMasking: true
      },
      plugins: []
    },
    "./graphql.schema.json": {
      plugins: ["introspection"]
    }
  }
};