graphqlタイトルへのタグの追加

5082 ワード
graphql authentication テキストリンク

ログイン/ログアウト

  • のログイン/ログアウト機能は、RESTAPIの使用が正しいと判断し、authTokenおよびrefreshTokenの作成およびRESTAPIサーバの使用を承認する.
  • 認定コース
    1)ログイン要求
    2)authToken/refreshTokenの発行
    3)authTokenはreduceに保存し、refreshTokenはクッキーに保存する
    4)トークンをAuthorization : `Bearer ${token}`の形で検証が必要な要求ヘッダに送信する
    5)authTokenを定期的にチェックして期限切れかどうかを確認し、期限切れの場合はrefreshTokenをサーバに再送信し、新しいauthToken
    • に更新する
  • Graphqlリクエストを送信する場合、転送、ファイルアップロード、カテゴリ生成の音楽は認証が必要となるため、Graphqlリクエストを送信する場合は、ヘッダにタグを付けて送信する必要がある.

    • 見出しにtokenを追加

  • この方法は、「一度に」見出しにタグを追加する方法である.リクエストを送信するたびにデフォルトでヘッダーにタグを追加する場合は、https://www.apollographql.com/docs/react/networking/authentication/のヘッダーセクションを参照してください.
  • はフックを使用する場合にも適用されます.hookを無効にするとsetContextに設定されます.

  • CORSエラーのため、クライアント作成時に認証情報設定を追加
    import React from "react";
import { render } from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./src/App";
import {
  ApolloClient,
  ApolloProvider,
  HttpLink,
  InMemoryCache,
} from "@apollo/client"; 

import { createUploadLink } from "apollo-upload-client";
// 파일 업로드를 해야해서 createUploadLink 사용.
const httpLink = createUploadLink({
  uri: "graphql 주소",
  credentials: "same-origin", //CORS에러 처리하기 위해 추가
});

const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});// 클라이언트 인스턴스 생성

render(
  <ApolloProvider client={client}>//프로바이더에 클라이언트 제공
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ApolloProvider>,
  document.querySelector("#root")
);

  • graphsqlリクエスト送信でヘッダファイルを設定する(context->ヘッダファイル->keyname:token)
    • const [posting, { loading, error, data }] = useMutation(POSTING, {
    context: {
      headers: {
        authorization: `Bearer ${window.localStorage.getItem("authToken")}`,
        "Content-Type": "application/json",
      },
    },
  });

    追加点（1回に複数の音楽/クエリーを要求）-未解決のXXXを参照してください

  • は現在、転送時にサムネイルをアップロードし、=>(Upload Mutation)を受け取り、アップロードしたファイルのfildIdをpost Mutationの変数として渡しています.
  • それよりも、アップロード音楽とアップロード音楽を併用してリクエストする方が良いと思います.

    • 1. @export decorator

  • 私が望んでいる形態:1.Upload Music(結果:fileId)->2.ポッドキャスト音楽(fileIdを変数として使用)ですが、1つのリクエストで2つの音楽を同時に実行する必要があります.
  • ではUpload Mutationの結果をPosting Mutationの変数にすべきですが、どうすればいいか分かりません.
  • @export Decoratorを使えばいいです.
    (field@export(as:“variablename”)形式)(https://github.com/apollographql/apollo-client/issues/6634)
    • const UPLOAD = gql`
    mutation upload($file: Upload!) {
      upload(file: $file) {
        realName
        fileId @export(as: "thumbnail")
        originalName
      }
    }
  `;
  
 const POSTING = gql`
    mutation createPost(
      $title: String!
      $tags: [String]!
      $content: String
      $thumbnail: ID
    ) {
      createPost(
        input: {
          title: $title
          tags: $tags
          content: $content
          thumbnail: $thumbnail
        }
      ) {
        postId
        tags
      }
    }
  `;

    2.複数のクエリー/音楽を同時に実行


    gqlに2つの音楽を入れてrequestを送信できるようになりました.
    gql文に2つの音楽クリップを同時に追加して実行しようとしたが、以下のエラーが発生し、実行されなかった.
    react-apollo only supports a query, subscription, or a mutation per HOC. [object Object] had 0 queries, 0 subscriptions and 2 mutations. You can use 'compose' to join multiple operation types to a component
    react-apolloは、HOCごとに1つの音楽/クエリー/サブスクリプトをサポートします.次に、複数を同時に実行する場合は、「compose」を使用して複数のクエリー/音楽/サブスクリプトをマージできます.
    -だから私はcomposeを探しています.今は具体的な使い方が分かりません.完璧な後処理!

    解決策

  • 少し空っぽで、ただ私が変にgqlを使っただけです.
    mutaion MUTAIONNAME($variableA:typeA,$varibleB:typeB){
	A(variable:$variableA){
    	data
    }
    B(variable:$variableB){
    	data
    }
}
    上記のフォーマットでリクエストが正常に実行されるだけです.私が犯した過ちはAとBの前にも突然変異を加えたことだ.
    もともと内部に変異/queryをつけないので、どんな精神が加わったのか分かりません.
    • [アンドロイド]XMLパケット(XmlToJson)
    微信微博QQの簡単な実現を分かち合う(二)