TS5095 error when building

[datanexus-vincent]

I'm getting this error when I build my local graphclient package:

Failed to generate the schema Error: Failed to fetch introspection from https://api.thegraph.com/subgraphs/name/graphprotocol/compound-v2: error TS5095: Option 'preserveValueImports' can only be used when 'module' is set to 'es2015' or later.

What am I missing in my Vue 3 / Apollo 3 / TypeScript implementation? The react example with the same graph client config and example query compiles just fine so that leads me to believe it might be a tsconfig misconfiguration, but I can't seem to nail it down. Any help would be much appreciated, thank you!

---

My repository: https://github.com/datanexus-vincent/graph-client-vue3-apollo-example

Full debug log:

yarn run v1.22.15
$ graphclient build
💡 GraphClient Cleaning existing artifacts
💡 GraphClient Reading the configuration
@graphql-tools/load: normalizePointers ./src/queries/example-query.graphql: 0.077ms
@graphql-tools/load: normalizePointers: 0.228ms
@graphql-tools/load: collectDocumentString ./src/queries/example-query.graphql: 0.064ms
@graphql-tools/load: collectSources ./src/queries/example-query.graphql: 0.326ms
@graphql-tools/load: loadFile ./src/queries/example-query.graphql: 10.006ms
@graphql-tools/load: collectFallback ./src/queries/example-query.graphql: 10.225ms
@graphql-tools/load: collectSources queue: 34.474ms
@graphql-tools/load: parseSchema /home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/src/queries/example-query.graphql: 0.014ms
@graphql-tools/load: parseRawSDL /home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/src/queries/example-query.graphql: 0.057ms
@graphql-tools/load: useComments /home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/src/queries/example-query.graphql: 1.309ms
@graphql-tools/load: collectValidSources /home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/src/queries/example-query.graphql: 0.016ms
@graphql-tools/load: parseSource /home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/src/queries/example-query.graphql: 2.087ms
@graphql-tools/load: prepareResult: 0.005ms
@graphql-tools/load: loadTypedefs: 38.218ms
💡 GraphClient Generating the unified schema
🐛 GraphClient - GetMesh Getting subschemas from source handlers
🐛 GraphClient - uniswapv2 Generating the schema
🐛 GraphClient - compoundv2 Generating the schema
💥 GraphClient - compoundv2 Failed to generate the schema Error: Failed to fetch introspection from https://api.thegraph.com/subgraphs/name/graphprotocol/compound-v2: error TS5095: Option 'preserveValueImports' can only be used when 'module' is set to 'es2015' or later.

    at GraphQLHandler.getMeshSource (/home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/node_modules/@graphql-mesh/graphql/cjs/index.js:302:23)
    at async /home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/node_modules/@graphql-mesh/runtime/cjs/get-mesh.js:132:28
💥 GraphClient - uniswapv2 Failed to generate the schema Error: Failed to fetch introspection from https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v2: error TS5095: Option 'preserveValueImports' can only be used when 'module' is set to 'es2015' or later.

    at GraphQLHandler.getMeshSource (/home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/node_modules/@graphql-mesh/graphql/cjs/index.js:302:23)
    at async /home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/node_modules/@graphql-mesh/runtime/cjs/get-mesh.js:132:28
💥 GraphClient Error: Schemas couldn't be generated successfully. Check for the logs by running Mesh.
    at getMesh (/home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/node_modules/@graphql-mesh/runtime/cjs/get-mesh.js:166:15)
    at async Object.handler (/home/vincenttaglia/WebstormProjects/graph-client-vue3-apollo-example/node_modules/@graphql-mesh/cli/cjs/index.js:304:53)
error Command failed with exit code 1.

[saihaj]

this subgraph seems to not be returning valid introspection result https://api.thegraph.com/subgraphs/name/graphprotocol/compound-v2

[datanexus-vincent]

Hey Saihaj, appreciate the response!

Unfortunately, I'm not sure that is the true source of the issue. I copied the .graphclientrc.yml file and the example query from the example project https://github.com/graphprotocol/graph-client/tree/main/examples/apollo which successfully builds the local .graphclient package without any introspection result errors.

From what I can tell the only inputs for building the local .graphclient package are the .graphclientrc.yml file and any query files you have linked in there. Is there anything else I can configure that would give me a different result when using the same .graphclientrc.yml and query files between different projects?

[schmidsi]

Hey @datanexus-vincent, if I remember correctly, the Compound V2 subgraph was manually enhanced on the hosted service with query-time computation as seen here: https://github.com/graphprotocol/compound-subgraph-wrapper. It might be that this manual change messed up with the schema introspection as @saihaj pointed out. I did not check myself.

I suggest that you use the one developed by Messari here: https://thegraph.com/explorer/subgraphs/6tGbL7WBx287EZwGUvvcQdL6m67JGMJrma3JSTtt5SV7?view=Overview&chain=mainnet

The enhancements done manually on Compound V2 should be reproducible with Graph Client. Let us know if you try to do this and how it goes.

[datanexus-vincent]

Hey @schmidsi, appreciate you jumping in on this.

I'm actually not even really interested in using the Compound V2 subgraph. I just wanted to create an example Vue 3/Apollo project that I could submit a pull request for so that I and others could better understand how all of these pieces work together, and so I used the same graph client config and example query as the React/Apollo example. But, for some reason, while the local graph client compiles just fine for the React/Apollo example, it doesn't compile with my implementation. At this point, I'm just trying to figure out why a graph client config and example query works in one project and not another.

Here is the debug output of a successful compile for the React/Apollo example in the graph client repo, which uses the exact same graph client config and example query as my example project. Do you have any idea why it might work in one project but not another?

yarn run v1.22.15
$ graphclient build
💡 GraphClient Cleaning existing artifacts
💡 GraphClient Reading the configuration
@graphql-tools/load: normalizePointers ./src/example-query.graphql: 0.087ms
@graphql-tools/load: normalizePointers: 0.255ms
@graphql-tools/load: collectDocumentString ./src/example-query.graphql: 0.066ms
@graphql-tools/load: collectSources ./src/example-query.graphql: 0.3ms
@graphql-tools/load: loadFile ./src/example-query.graphql: 10.733ms
@graphql-tools/load: collectFallback ./src/example-query.graphql: 10.955ms
@graphql-tools/load: collectSources queue: 29.082ms
@graphql-tools/load: parseSchema /home/vincenttaglia/WebstormProjects/graph-client/examples/apollo/src/example-query.graphql: 0.008ms
@graphql-tools/load: parseRawSDL /home/vincenttaglia/WebstormProjects/graph-client/examples/apollo/src/example-query.graphql: 0.067ms
@graphql-tools/load: useComments /home/vincenttaglia/WebstormProjects/graph-client/examples/apollo/src/example-query.graphql: 1.447ms
@graphql-tools/load: collectValidSources /home/vincenttaglia/WebstormProjects/graph-client/examples/apollo/src/example-query.graphql: 0.017ms
@graphql-tools/load: parseSource /home/vincenttaglia/WebstormProjects/graph-client/examples/apollo/src/example-query.graphql: 2.117ms
@graphql-tools/load: prepareResult: 0.005ms
@graphql-tools/load: loadTypedefs: 32.678ms
💡 GraphClient Generating the unified schema
🐛 GraphClient - GetMesh Getting subschemas from source handlers
🐛 GraphClient - uniswapv2 Generating the schema
🐛 GraphClient - compoundv2 Generating the schema
🐛 GraphClient - uniswapv2 The schema has been generated successfully
🐛 GraphClient - uniswapv2 Analyzing transforms
🐛 GraphClient - compoundv2 The schema has been generated successfully
🐛 GraphClient - compoundv2 Analyzing transforms
🐛 GraphClient - GetMesh Schemas have been generated by the source handlers
🐛 GraphClient - GetMesh Merging schemas using the defined merging strategy.
🐛 GraphClient - stitchingMerger Stitching directives are being generated
🐛 GraphClient - stitchingMerger Checking if any of sources has federation metadata
🐛 GraphClient - stitchingMerger Stitching the source schemas
🐛 GraphClient - stitchingMerger sourceMap is being generated and attached to the unified schema
Transformed schema is not set yet. Returning a dummy one.
💡 GraphClient Generating artifacts
💡 GraphClient Generating index file in TypeScript
💡 GraphClient Writing index.ts for ESM to the disk.
💡 GraphClient Cleanup
💡 GraphClient Done! => /home/vincenttaglia/WebstormProjects/graph-client/examples/apollo/.graphclient
Done in 3.91s.