Unknown fragment in server functions

[iBobik]

Environment

• Operating System: Darwin
• Node Version: v18.16.0
• Nuxt Version: 3.4.3
• Nitro Version: 2.4.0
• Package Manager: npm@9.5.1
• Builder: vite
• User Config: ssr, css, build, devServer, modules, runtimeConfig
• Runtime Modules: nuxt-graphql-client@0.2.27
• 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

[nonlinearcom]

Did anyone manage to get fragments working?

[madebyfabian]

@nonlinearcom Not working for me either. Same error.

[fouss]

same problem here, is there any solution ?

[rmartinez7]

Also looking for more info on this

[rylanharper]

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:)

[vernaillen]

@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?

[rylanharper]

@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.

[Jaklik]

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 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 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.

[maximilliangeorge]

Indeed, fragments do not work when called in event handlers in the server directory.

[stlbucket]

@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.

[stlbucket]

I was able to see how fragments should work by running the playground.

[Kjolnyr]

Same issue here. Anyone able to assist me into resolving this issue?

[Alex--C]

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`])
})