符号化プログラムなしinstagramクローン符号化ショートカットhttps://nomadcoders.co/instaclone
シードを実施する前に、プロジェクトのヘッドを実施します.

ヘッドデザイン

上記の設計でタイトルを整理するには、いくつかの特殊な事項しかありません.
1.ログアウト状態、すなわち登録ページ会員登録ページのタイトルX
2.ログイン時にユーザーがAvatarを使用するかどうかに基づいてProfile Iconを作成する

ログインとログアウトの確認

UserActiveVarを使用してログインするかどうかを確認しますconst isLoggedIn = useReactiveVar(isLoggedInVar);

🚫 なぜLS上のTOKENは有効で存在するがnullを返すのか

これはBackendの問題ではありません.ただし、ヘッダファイルにtokenは含まれていません.
tokenをヘッダファイルに含める必要があるのは、ログイン状態でのみ実行されるQueryまたはMutationがあるため、ヘッダファイルにtokenを入れて送信することで認証されます.

解決策

このため、apollo clientはいくつかの設定が必要です.
1.httpLink:基本バックエンドuri
2.authLink:setContextは既存のヘッダファイルにtokenを追加し、tokenをヘッダファイルとしてすべてのリクエストに送信します.
また、既存のクライアントにはuriが設定されていますが、httpLinkとauthLinkのリンクが設定されています.

// apollo.js

const httpLink = createHttpLink({
   uri:"http://localhost:4000/graphql",
});

const authLink = setContext((_,{headers})=>{
   return {
      headers:{
         ...headers,
         token:localStorage.getItem(TOKEN),
      },
   };
});

export const client = new ApolloClient({
   cache:new InMemoryCache(),
   link:authLink.concat(httpLink),
});

🚫 LSのTOKENを強制的に変更したら？

TOKENを強制的に変更する場合は、必要な結果がログアウトまたは無効であることを通知します.
ただし、TOKENを強制的に変更することで、通常のログイン状態のUIが表示されます.

解決策

バックエンドから現在のログインユーザー情報を取得するmequeryを実現
meのtypeDefsはクエリであり,Userオブジェクトを返す.
meの解析器はProtectedResolverを用いて実現する.ログインしていない場合にmequeryにアクセスするとnullが返されるためです.
frontend使用me query
queryのデータはuseQueryを使用してインポートできます.
useQueryのオプションにはskipがあり、trueの場合にのみクエリ文が実行されます.

// useUser.js
// 여기서 hasToken은 isLoggedInVar의 Boolean값이다. 

const {data} = useQuery(ME_QUERY,{
   skip:!hasToken,
});

インポートしたデータがバックエンド設計でログインされている場合、tokenが存在し、このtokenを持つユーザーが存在する場合、そのユーザーのデータが返されます.ログインしていない場合、tokenが存在しないか、tokenが存在しないが一致しないユーザーがnullが返されます.
ユーザホスト実装
現在ログインユーザデータを受信するQueryは1つの場所に依存せず,多くの場所で利用できるため,このクエリはHookで実現することが望ましい.

// useUser.js
function useUser(){
   // data가 변경되는 경우마다 실행
   useEffect(()=>{ 
      if(data?.me ===null){
         logUserOut(history);// LS의 토큰을 삭제하고 home route로 이동(로그인페이지로 이동)
      }
   },[data]);
   return data;  
}

export default useUser;

ログインなしでHeader Avatarを使用

現在のログインユーザのquery結果値をuser()で取得し、ログインユーザにavatarが存在する場合、avatar icon avatarを指定しない場合、dipolt iconを指定します.

Avatar Component

const Avatar = ({url=""})=>{
   return <SAvatar>{url !== ""? <Img src={url}/> : null}</SAvatar> 
}

Avatarコンポーネントはurlをpropsとして使用し、転送できない場合はdepartに「」を渡します.
したがって、urlが「」の場合nullが返され、urlが存在する場合、アップロードされた画像が取得されます.

🚫 Reactの実装でよくあるエラー

Headerは、現在ログインしているユーザーのクエリー結果をユーザーを使用してデータにインポートします.data.me.avatarに示すように、エラーが発生します.
これは,データがQuery文を用いてサーバに要求された結果値であるため,受信に時間がかかるためである.すなわち、データには未定義の時点が存在するため、データが存在する.私が見つからないのでエラーが発生しました.

解決策

&&演算子

を使用

Optional Chaining

傍観者チェニンを知る前に,この問題は毎回&&演算子によって解決される.
傍観者スクリーニング(?.)なんだ.前の評価オブジェクトがnullまたはundefinedの場合、undefinedが返されるため、前の評価オブジェクトが存在しなくてもエラーは発生しません.
丹.悪用しないで無条件に存在する場所は?使用しないと、早期にエラーが見つかりやすい.