-
Notifications
You must be signed in to change notification settings - Fork 1
Apollo Server / Client on Next.js App Router #13
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
Conversation
@taiseiue @nenrinyear |
import { getSSRApolloClient } from "@/graphql/client"; | ||
import { gql } from "../../apollo/__generated__/client"; | ||
|
||
export const dynamic = 'force-dynamic' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SSRしているのでこれをつけないとビルドで死ぬ(workaroundあるなら教えてください)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
実用上は全然問題ないんだけどforce-dynamic
必須なのはちょっと悲しいね
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
多分回避できそうな感じはしますが、詳しくわかってないので一旦このままって感じです。
すみません
const query = gql(` | ||
query GetUser($id: ID!){ | ||
user(id: $id) { | ||
id | ||
name | ||
} | ||
} | ||
|
||
`) | ||
|
||
|
||
export default async function Home() { | ||
const { data, loading } = await getSSRApolloClient().query({ | ||
query, | ||
variables: { id: '1' } | ||
}) | ||
|
||
if (loading) { | ||
return <div>Loading...</div> | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SSRしているので loading になることはないですが、こんな感じにかけますよのサンプルです。
"use client"; | ||
|
||
import { useQuery } from "@apollo/client"; | ||
import { gql } from "../../../apollo/__generated__/client"; | ||
|
||
const query = gql(` | ||
query GetUser($id: ID!){ | ||
user(id: $id) { | ||
id | ||
name | ||
} | ||
} | ||
`); | ||
|
||
export default function SamplePage() { | ||
const { data, loading } = useQuery(query, { | ||
variables: { id: '1' } | ||
}); | ||
|
||
if (loading) { | ||
return <div>Loading...</div>; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
CSRはこんな感じで書けます
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
よくわかんないのでapproveします
dmdm! ひとまずマージしてダメそうなら revert します。 |
Pull request
packages-lock.jsonでPRがデカく見えますが実際のところは200行程度です
❓ 背景 (Why)
⛏️ 修正内容 (What)
📸 キャプチャ
👀 懸案事項
🔍 チェック項目
このPRで変更が想定通りうまくいっているかを確認するには...