Skip to content

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

Merged
merged 8 commits into from
Feb 16, 2025
Merged

Conversation

rokuosan
Copy link
Collaborator

@rokuosan rokuosan commented Feb 16, 2025

Pull request

packages-lock.jsonでPRがデカく見えますが実際のところは200行程度です

  • Issues:

❓ 背景 (Why)

⛏️ 修正内容 (What)

  • 実装方針や作業内容を細かく

📸 キャプチャ

Before After
画像 画像

👀 懸案事項

🔍 チェック項目

このPRで変更が想定通りうまくいっているかを確認するには...

  • [ ]
  • [ ]
  • [ ]

@rokuosan rokuosan self-assigned this Feb 16, 2025
@rokuosan
Copy link
Collaborator Author

@taiseiue @nenrinyear
とりあえず GraphQL の素振り結果として見てほしい感じです。
だいたいこんな感じに仕上がりますという感じですね。

import { getSSRApolloClient } from "@/graphql/client";
import { gql } from "../../apollo/__generated__/client";

export const dynamic = 'force-dynamic'
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SSRしているのでこれをつけないとビルドで死ぬ(workaroundあるなら教えてください)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

実用上は全然問題ないんだけどforce-dynamic必須なのはちょっと悲しいね

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

多分回避できそうな感じはしますが、詳しくわかってないので一旦このままって感じです。
すみません

Comment on lines +6 to +25
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>
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SSRしているので loading になることはないですが、こんな感じにかけますよのサンプルです。

Comment on lines +1 to +22
"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>;
}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSRはこんな感じで書けます

Copy link
Collaborator

@nenrinyear nenrinyear left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

よくわかんないのでapproveします

@rokuosan
Copy link
Collaborator Author

dmdm! ひとまずマージしてダメそうなら revert します。

@rokuosan rokuosan merged commit 2937dde into main Feb 16, 2025
2 checks passed
@rokuosan rokuosan deleted the graphql-practice branch February 16, 2025 10:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants