Hi everyone,
First of all, I did not have a chance yet to thank you all for your dedicated time to make such an awesome tool, so here it is!
TLDR;
Where should I declare GraphQL fragments in order to be available and recognized by Typescript?
To factorize gql queries, I’m using GraphQL Fragments with half success, everything works as intended on Apollo’s side (queries are sucessful), but typescript is stuck as it is unaware of the declaration of fragments.
Currently, I’m using it as such, and it works:
web/src/fragments/events.ts
export const EventFragment = gql`
fragment EventFragment on Event {
[...]
}
`
[...]
web/src/components/Event/EventsCell
import { EventFragment } from "src/fragments/events";
const QUERY_TANK = gql`
query FindEventsTankQuery($take: Int, $skip: Int, $idTank: Int!) {
events: eventsByTank(take: $take, skip: $skip, idTank: $idTank) {
...EventFragment
}
}
${EventFragment}
`
const QUERY_SITE = gql`
query FindEventsSiteQuery($take: Int, $skip: Int, $idSite: Int!) {
events: eventsBySite(take: $take, skip: $skip, idSite: $idSite) {
...EventFragment
}
}
${EventFragment}
`
/**
* https://github.com/redwoodjs/redwood/blob/main/packages/web/src/components/createCell.tsx#L133
* The GraphQL syntax tree to execute or function to call that returns it.
* If `QUERY` is a function, it's called with the result of `beforeQuery`.
*/
export const QUERY = ({variables}) =>{
if(variables.idTank)
return QUERY_TANK
else
return QUERY_SITE
}
Byt my fragments are marked as errored by Typescript, both with yarn rw g types and as I hover the red-underlined fragments on my code:
Unknown fragment “EventFormFragment”
I guess redwood doesn’t include the fragments when it generates the types, as it doesn’t know about it.
I tried:
- writing fragments on my src/graphql/.sdl.ts* file, but then I can’t import it on my Cell, and Types aren’t generated either
- patching my fragments directly on .redwood/schema.graphql, just to see, no success
- moving my fragments in api, and including
documentson graphql.config.ts, as seen on this github thread with:documents: ["./api/src/fragments/*.ts"]documents: "./api/src/fragments/*.ts"documents: "api/src/fragments/*.ts"
Graphql.config.ts :
const { getPaths } = require('@redwoodjs/internal')
module.exports = {
schema: getPaths().generated.schema,
documents: ["./api/src/fragments/*.ts"] //https://the-guild.dev/graphql/codegen/docs/config-reference/documents-field#glob-expression
}
I left tsconfig.json untouched.
I’m wondering where should I ideally inject these fragments in Redwood scheme? Any idea (other than @ts-expect-error everywhere)?
Thanks for your time!
Update
I can find my types on web/types/graphql.d.ts when I edit tsconfig.json to include my fragments, when it’s located on web, but typescript still complains:
tsconfig.json
{
[...]
"include": [
"src",
"../.redwood/types/includes/all-*",
"../.redwood/types/includes/web-*",
"../types",
"./types",
"src/fragments"
]
}
web/types/graphql.d.ts
export type EventFormFragment = { __typename?: 'Query', […]