AplloClientのProvidersの書き方

code:providers.tsx

"use client";

import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";

import { ApolloProvider } from "@apollo/client/react";

const client = new ApolloClient({

link: new HttpLink({

}),

cache: new InMemoryCache(),

});

export function Providers({ children }: { children: React.ReactNode }) {

return <ApolloProvider client={client}>{children}</ApolloProvider>;

}

ApolloClientインスタンスの立ち上げ方はドキュメントまんまっぽい

Providersコンポーネントの書き方、特に引数でちょっと躓いたのでメモしておく

code:providers.tsx

export function Providers({ children }: { children: React.ReactNode }) {

return <ApolloProvider client={client}>{children}</ApolloProvider>;

}

{children}

分割代入でchildrenという名前の値を取り出す

{ children: React.ReactNode }

childrenの型はReact.ReactNodeですよと教えてあげる

別の書き方で、受け取るpropsを定義しておくパターンがある。

こっちの方がわかりやすい。

code:another.tsx

type providerProps {

children: React.ReactNode;

}

function Providers({ children }: Props) {

// 同じ名前を2回書かなくて済む

}

これの簡略版が今回の書き方。慣れるしかないねぇ。

型の返り値なんで書いてないの？

Reactコンポーネントの返り値はJSX.Elementなので通常は省略される。

TypeScriptが推論してくれる。

tsconfigやeslintの設定によっては明示的に書く必要がある。