nuxt-graphql-client
nuxt-graphql-client copied to clipboard
Diizzayy
Unknown fragment in server functions
Environment
- Operating System: Darwin
- Node Version: v18.16.0
- Nuxt Version: 3.4.3
- Nitro Version: 2.4.0
- Package Manager: [email protected]
- Builder: vite
- User Config: ssr, css, build, devServer, modules, runtimeConfig
- Runtime Modules: [email protected]
- Build Modules: -
Describe the bug
Fragments are lost on the way when called in the server routes. Definition:
fragment OrderItem on OrderItem {
orderCode
creationTime
status
}
query getOrderItem ($orderCode: String!, $offerID: UUID!) {
orderItem: getOrderItem (by: { orderCode: $orderCode, offer: { id: $offerID } }) {
...OrderItem
}
}
When called GqlGetOrderItem it fails with this error:
[nuxt] [request error] [unhandled] [500] Unknown fragment "OrderItem".: {"response":{"errors":[{"message":"Unknown fragment \"OrderItem\".","locations":[{"line":3,"column":8}]}],"status":400,"headers":{}},"request":{"query":"query getOrderItem ($orderCode: String!, $offerID: UUID!) {\n orderItem: getOrderItem (by: { orderCode: $orderCode, offer: { id: $offerID } }) {\n ...OrderItem\n }\n}","variables":{"orderCode":"2023000001","offerID":"db27911f-0bc9-49cb-b27b-ca7f8a5f8a7f"}}}
at ./node_modules/graphql-request/dist/index.js:395:31
at step (./node_modules/graphql-request/dist/index.js:63:23)
at Object.next (./node_modules/graphql-request/dist/index.js:44:53)
at fulfilled (./node_modules/graphql-request/dist/index.js:35:58)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
It is visible in a response that fragment was not included at the end.
In .nuxt/gql/default.ts it seems correct:
export const OrderItemFragmentDoc = gql`
fragment OrderItem on OrderItem {
orderCode
creationTime
status
}
`;
…
export const GetOrderItemDocument = gql`
query getOrderItem($orderCode: String!, $offerID: UUID!) {
orderItem: getOrderItem(by: {orderCode: $orderCode, offer: {id: $offerID}}) {
...OrderItem
}
}
${OrderItemFragmentDoc}`;
Same fragments works when used client-side in the SPA.
Expected behaviour
Fragment will be included in this request.
Reproduction
https://stackblitz.com/edit/github-twqhau?file=server%2Fapi%2Ftest.ts
Additional context
No response
Logs
No response
Fragments are working just fine in my project (I am using the Shopify API, so a lot of fragments lol).. I posted this response on another thread, but I will add it here too:
The docs are very vague on this.. You have to create a fragments folder inside the queries folder. Then they would be set up like this:
fragment Image on Image {
id
altText
height
width
url (transform: {
maxHeight: 600,
maxWidth: 400,
crop: CENTER
})
}
Then add them into your .gql queries with no import such as this:
image {
...Image
}
Hope this helps:)
@rylanharper I updated @iBobik's reproduction accordingly: https://stackblitz.com/~/github.com/vernaillen/nuxt-graphql-client-serverfragments But the error still remains. What you describe works client-side, but still not in a server route. Unless I'm missing something?
@vernaillen Hmm you know what.. you are correct. Sorry, my mistake, my server routes in my project are actually using plain queries without the fragments being used. I thought I had had two fragments within my query, but I typed them out instead so I guess I ran into this issue as well when I was working on that aspect of the project.
Ignore my post above, it does work client-side, but my fragments not working on the server routes upon adding them in.
I have a same issue. Fragments works fine on Client-side, but on server side I have same error as is in first post. Maybe, I am using it wrong, but if I compare Gql<SomeQueryName> in Client-side, it works fine, but on server api routes return error for unknown Fragment. If I inspect nitro-imports, there is a Gql<SomeQueryName> function, but with different import, from typeof import('#gql-nitro'), but in there is no directory call like that. In #imports.ts is the correct path, but in server api routes using nitro-imports.
Indeed, fragments do not work when called in event handlers in the server directory.
@vernaillen - the example you posted above seems to be a broken link now
Is there anywhere else i can see an example of how it is supposed to work in the first place?
I'm just now wanting to use fragments, and have been storing my graphql queries like so:
graphql
|--subdir
|--mutation
|--doMutation.graphql
|--query
|--query.graphql
I've had no problems with this approach. But it sounds like /queries is the preferred directory for ALL queries, with /queries/fragments being the location for fragments, based on some snippets of posts I've found - much like @rylanharper says above.
Will my directory structure cause problems?
Is there a definitive example I haven't been able to find. I've looked in the docs, issues, discussions and the broken link so far. I've had no luck getting my fragment to be incorporated.
Seems like codegen is not used for the operations that are injected into nitro. Setting codegen: false will break fragment support completely, confirming my suspicion that fragments are only supported through https://github.com/dotansimha/graphql-code-generator .
I'm not familiar enough with the nitro quirks to add codegen support for the nitro operations... Would be great if someone with more nitro experience could provide some pointers.
For now, I am using this as an ugly workaround:
import gqlNitro from '#gql-nitro'
import * as gql from '#gql/default'
export default defineEventHandler(async (event) => {
return gqlNitro.clients.default.request(gql[`EntryDocument`])
})
