[Issue]: Nextjs App Router Migration Problem about wundergraph

[kyuumeitai]

I'm on the same boat as you. I think there's no way to use with app router, at least from now. For the sake of seeking workarounds, your error happens to me when I try to call it in a page, like this:

import { MainTrivia } from '@/components/main-trivia'
import { useQuery, withWunderGraph } from '@/generated/nextjs'
import { NextPage } from 'next'

const Home: NextPage = () => {
  const questions = useQuery({
    operationName: 'survey/Questions',
    input: {
      id: '65610b6e03500e299a29d52d',
    },
  })

  return (
    <div className="container relative">
      <section>
        <MainTrivia questions={questions} />
      </section>
    </div>
  )
}

export default withWunderGraph(Home)

node: v18
next: 14.0.3

The thing that works is to fetch directly to the wundergraph server (for example: http://127.0.0.1:9991/app/main/operations/AlbumById?albumId=${props.params.id} ) as in this blog post:

https://wundergraph.com/blog/data_fetching_with_next13

the thing is that I don't want to leave the wunderctl up in prod.

Maybe someone has some solution or workaround for nextjs app layout based?

[kyuumeitai]

Digging further: I've tried to run client directly, as in this example project. However, if you look closer to the package.json, the build process looks like this:

"build": "wunderctl generate && next build",

But, the start process:

"start": "npm run dev"

and not the standard next start, making the wunderctl up mandatory :(

Is there a way to get only the generated types but tell wundergraph like 'ok, if the env is PROD, call the original api.url defined in the apis section of configureWunderGraphApplication'?

[Pagebakers]

By the way, here's also an example with the app dir.
https://github.com/wundergraph/wundergraph/tree/main/examples/nextjs-app-dir

[leanrob]

I also ran into an issue like this, but for me it would only occur under certain conditions. Our issue is with "liveQuery" and ti failing in both client and server components. However, if you are not using live query then this may help.

We were able to get useQuery to work but only under these conditions:

• Not a live query
• useQuery is used in a "use client" component
• The parent component of the one using useQuery is also a a "use client" component

I've added a ticket for the liveQuery issue as well.

[Pagebakers]

Any page or component where you use React state needs to be client component, same goes for useQuery, useMutation.

https://github.com/yessGlory17/wundergraph-next-router-migration/blob/master/app/page.tsx#L1

The page should have 'use client' directive.

You can use the WunderGraph typescript client directly in server components.

const { data } = await client.query({
  operationName: 'Dragons'
})