Context API

Cache

Cacheは一時的にデータを格納する場所です。

アポロシーザー

プロジェクト全体からアクセス可能なglobal state
これまで、支柱は多くの段階を経て、伝達、伝達...無限に伝えてくれたけど.
アポロシーザー台を使うと、プロジェクト全体が近づくことができます.
ただし、すべての値がアポロキャッシュ状態に格納されている場合
複雑なので、私はこの問題を解決します.
Context API.

Context API

最上位レベルapp jsから最下位レベルへのデータ転送
私が払いたいお金を加えただけで渡すことができます.

createContext

import { createContext } from "react"; export const GlobalContext = createContext(null); function MyApp({ Component, pageProps }) { const [accessToken, setAccessToken] = useState(""); const [userInfo, setUserInfo] = useState({}); const value = { accessToken: accessToken, setAccessToken: setAccessToken, userInfo: userInfo, setUserInfo: setUserInfo, }; ............ 最上位ファイルからデータを転送するためにcreateContextを書きました。 そして譲渡したい価格をvalueに入れました。 return ( <GlobalContext.Provider value={value}> <ApolloProvider client={client}> {!isMain && !isSignIn && ( <Layout> <Component {...pageProps} /> </Layout> )} {isMain && <Main />} {isSignIn && <SignIn />} </ApolloProvider> </GlobalContext.Provider> ); } GlobalContextという名前のContextAPIが作成されています。 私が適用したい部分の外<GlobalContextProvider>で彼をかばった。 value値を伝えるために、道具で伝える様子。

useContext

import { useContext} from "react"; export default function MainPage() { const { setAccessToken } = useContext(GlobalContext); async function onClickLogin() { try { const result = await loginUser({ variables: { password, email, }, }); console.log(result.data.loginUser.accessToken); localStorage.setItem("accessToken", result.data?.loginUser.accessToken); setAccessToken(result.data.loginUser.accessToken); router.push("/boards"); } catch (err: any) { alert(err.message); } } ContextAPIを受信および書き込みするには、useContextをインポートする必要があります。