Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unknown fragment in server functions #333

Open
iBobik opened this issue May 17, 2023 · 17 comments · May be fixed by #499
Open

Unknown fragment in server functions #333

iBobik opened this issue May 17, 2023 · 17 comments · May be fixed by #499
Labels
bug Something isn't working

Comments

@iBobik
Copy link

iBobik commented May 17, 2023

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

@iBobik iBobik added the bug Something isn't working label May 17, 2023
@iBobik iBobik changed the title Unknown fragment Unknown fragment in server functions May 20, 2023
@nonlinearcom
Copy link

Did anyone manage to get fragments working?

@madebyfabian
Copy link

@nonlinearcom Not working for me either. Same error.

@fouss
Copy link

fouss commented Oct 17, 2023

same problem here, is there any solution ?

@rmartinez7
Copy link

Also looking for more info on this

@rylanharper
Copy link

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
Copy link

@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
Copy link

rylanharper commented Oct 25, 2023

@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
Copy link

Jaklik commented Oct 30, 2023

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
Copy link

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

@stlbucket
Copy link

@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
Copy link

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

@Kjolnyr
Copy link

Kjolnyr commented Apr 8, 2024

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

@Alex--C
Copy link

Alex--C commented May 2, 2024

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

@freality freality linked a pull request Jul 1, 2024 that will close this issue
@urbgimtam
Copy link

🙏 for the pull request to be merged.

@cfab
Copy link

cfab commented Aug 20, 2024

Any news on this ?

@BorisKamp
Copy link

Any updates? this has been open for over a year now....

@BorisKamp
Copy link

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

Can you tell us more about how to implement this so it works for us? I have no clue where you put this piece of code.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.