I just dropped a dependency that’s unrelated to GraphQL that resulted in a ton dependencies being removed from my yarn.lock. For some reason this has also broken my GraphQL PPX:
96 │ @react.component
97 │ let make = () => {
98 │ let queryResult = TripsQuery.use()
99 │
100 │ let intl = ReactIntl.useIntl()
The value use can't be found in TripsQuery
My query is defined in the same file as:
%graphql(`
query TripsQuery @ppxConfig(
templateTagImport: "gql",
templateTagLocation: "@apollo/client",
templateTagIsFunction: true
){
trips {
id
name
startDate @ppxCustom(module: "Graphql.Date")
endDate @ppxCustom(module: "Graphql.Date")
bannerPhoto {
small
}
}
}
`)
This all worked before, so I’m unsure if a dependency has been dropped that’s needed to create the hook or another dependency was updated that’s interfering. Anyone have any idea what would break the ppx?
The use function is added based on the extendQuery in the graphql field of the bsconfig.json configuration. (You can also add it to the @ppxConfig configuration).
Ah, I forgot about that config. I had "extendQuery": "ApolloClient.GraphQL_PPX.ExtendQuery", in my bsconfig, which I’ve changed to just ExtendQuery to match the docs. I’m still getting the same compile error though. Is there some other step I’m missing to add the use to the query? Again all this worked before and I haven’t touched any of the GraphQL config.
Here’s all the relevant bits from my bsconfig.json:
"bs-dependencies": [
"@reasonml-community/graphql-ppx"
],
"ppx-flags": ["@reasonml-community/graphql-ppx/ppx"],
"graphql": {
"apolloMode": true,
"extendMutation": "ExtendMutation",
"extendQuery": "ExtendQuery",
"extendSubscription": "ExtendSubscription",
"templateTagReturnType": "templateTagReturnType",
"templateTagImport": "gql",
"templateTagLocation": "@apollo/client",
"templateTagIsFunction": true
},
It looks like you’re using rescript-apollo-client? If so, you need it in your bs-dependencies. You can find documentation here: https://jeddeloh.github.io/rescript-apollo-client/docs/installation#3-apollo-specific-graphql-ppx-configuration
Oops sorry, I accidentally omitted that from my post. rescript-apollo-client is in my bs-dependencies.
I notice the apollo-rescript docs specify using the full ApolloClient.GraphQL_PPX.ExtendQuery while the PPX’s docs suggest just ExtendQuery. I’ve tried both.
Is there another error previous to this? What versions of @reasonml-community/graphql-ppx, rescript-apollo-client, and @rescript/react are in use?
No this is the only error.
Package.json:
"@apollo/client": "3.3.19",
"rescript-apollo-client": "2.0.1",
"@reasonml-community/graphql-ppx": "1.2.0",
"@rescript/react": "0.10.3",
The ppx docs just mention how it can be extended in general. You need the full ApolloClient.GraphQL_PPX.ExtendQuery module name for rescript-apollo-client.
Why are you duplicating configuration in the query (directive) and in the bsconfig.json?
Perhaps the bsconfig.json is not picked up? Can you try to extend the query with the extend attribute in the @ppxConfig directive?
I remember I went in circles trying to get this working in the first place. I was only able to get the query to work when I included the config there as well. I just tried copying the extend to my query but am still having the same problem:
%graphql(`
query TripsQuery @ppxConfig(
apolloMode: true,
extendMutation: "ApolloClient.GraphQL_PPX.ExtendMutation",
extendQuery: "ApolloClient.GraphQL_PPX.ExtendQuery",
extendSubscription: "ApolloClient.GraphQL_PPX.ExtendSubscription",
templateTagReturnType: "ApolloClient.GraphQL_PPX.templateTagReturnType",
templateTagImport: "gql",
templateTagLocation: "@apollo/client",
templateTagIsFunction: true
){
trips {
id
name
startDate @ppxCustom(module: "Graphql.Date")
endDate @ppxCustom(module: "Graphql.Date")
bannerPhoto {
small
}
}
}
`)
In a @ppxConfig for a query you just have the extend attribute (as you only extend this particular query, so change extendQuery for just extend and remove extendMutation and extendSubscription from the config of this query). Are you up for a quick video call to debug this? Very strange that it is not working!
Do you by any chance redefine or include/open another module that is called TripsQuery that shadows this query?
That got it, thank you! The smallest config that seems to work is this:
%graphql(`
query TripsQuery @ppxConfig(
extend: "ApolloClient.GraphQL_PPX.ExtendQuery",
templateTagReturnType: "ApolloClient.GraphQL_PPX.templateTagReturnType",
templateTagLocation: "@apollo/client"
){
trips {
id
name
startDate @ppxCustom(module: "Graphql.Date")
endDate @ppxCustom(module: "Graphql.Date")
bannerPhoto {
small
}
}
}
`)
Happy to hop on a video call too though- I’d love if I didn’t have to put this in the query and could just configure it via bsconfig.
I don’t. TripsQuery is only defined in this file and only referenced from this file as well. Once for the TripsQuery.use() call that was failing, and another time for a type alias type trip = TripsQuery.t_trips. I tried swapping out the type alias with an explicit type and the .use still failed.
Ack, I lied- I said it worked because it compiled but didn’t have time to run it manually or through CI to verify it until now. I had to add templateTagIsFunction as well because I’m using an ES6 bundler. Everything compiles, but the generated output fails because apparently apollo client doesn’t have a default:
Uncaught SyntaxError: import not found: default
import * as ReactIntl from "react-intl";
import * as Caml_option from "rescript/lib/es6/caml_option.js";
import Client from "@apollo/client";
Notice the other imports are all import * as... but Apollo’s is using the default. Is there an option to change this?
I found a working combination of the tags. These still don’t work in my bsconfig.json, but adding all of them to my query makes it work:
%graphql(`
query TripsQuery @ppxConfig(
templateTagImport: "gql",
templateTagLocation: "@apollo/client",
templateTagIsFunction: true,
templateTagReturnType: "ApolloClient.GraphQL_PPX.templateTagReturnType",
extend: "ApolloClient.GraphQL_PPX.ExtendQuery"
){
trips {
id
name
startDate @ppxCustom(module: "Graphql.Date")
endDate @ppxCustom(module: "Graphql.Date")
bannerPhoto {
small
}
}
}
`)
I had the same error and found the issue to be comments in the bsconfig.json
`