今回やること
前回railsとGraphQLを使ってバックエンドの実装を進めたので今回はそれをフロントで表示するのが目標です。
apollo使います
何かっていうとフロントでgraphqlを使うためのライブラリです。
apollo clientインストール
フロント側で以下を実行
yarn add @apollo/client graphql
apolloセットアップ
/src/pages/_App.tsxに以下を追記
/src/pages/_App.tsx
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
+ import {
+ ApolloClient,
+ InMemoryCache,
+ ApolloProvider,
+ createHttpLink
+ } from "@apollo/client";
+
+ const link = createHttpLink({
+ uri: "http://localhost:3000/graphql",
+ credentials: "include",
+ });
+
+ const client = new ApolloClient({
+ cache: new InMemoryCache(),
+ link: link,
+ });
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
getLayout?: (page: ReactElement) => ReactNode
}
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout
}
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page) => page)
return (
+ <ApolloProvider client={client} >
<ChakraProvider>
{getLayout(<Component {...pageProps} />)}
</ChakraProvider>
+ </ApolloProvider>
)
}
これで全てのページでapollo clientが使用できるようになりました！
実装
とりあえずトップページに前回作ったScoresを一覧で表示しようと思います
ISRとか一旦抜きに普通に表示します
import { Box } from '@chakra-ui/react'
import type { ReactElement } from 'react'
import { Layout } from '../components/common/Layout'
import type { NextPageWithLayout } from './_app'
import { useQuery, gql } from "@apollo/client";
const GET_SCORES = gql`
query GetScores {
scores {
id
title
}
}
`;
type Score = {
id: Number
title: String
}
const Page: NextPageWithLayout = () => {
const { data, loading, error } = useQuery(GET_SCORES)
if (loading) return <Box>ロード中...</Box>;
if (error) return <Box>{error.message}</Box>;
return (
<Box>
<ul>
{data.scores.map((score: Score) => (
<li>{score.title}</li>
))}
</ul>
</Box>
)
}
Page.getLayout = function getLayout(page: ReactElement) {
return (
<Layout>
{page}
</Layout>
)
}
export default Page
こんな感じで一旦作成。
無事（？）CORSエラーが出ました
CORSエラーの解消
Rails側に戻り、Gemfileでコメントアウトになっている以下の行のコメントを外します
Gemfile
gem "rack-cors"
/config/initializers/cors.rbを以下のように編集。
/config/initializers/cors.rb
# Be sure to restart your server when you modify this file.
# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.
# Read more: https://github.com/cyu/rack-cors
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'http://localhost:3001'
resource "*",
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head],
credentials: true
end
end
コメントアウト外してcredentials: trueを追加しています。（methods:の行の最後のコンマ忘れずに！）
私の環境はフロント側のサーバーを:3001ポートで建てているので、ここはよしなに変更してください。
これでサーバー再起動すればCORSエラーが解消されているはずです！
表示されました！
今回はここまで！