実現したいこと
Next.jsのSWRHook関数内のfetcher関数の引数にトークンを渡したい
前提
Next.js
TypeScript を使用しています。
Vercelが提供しているNext.jsCommerceというソースをGitから落としてきて改修しようとしています。
https://github.com/vercel/commerce
初心者です。
SWRやMutatioinHookについてあまり理解できていないと思います。
知識不足であまり説明できなくてすみません。
どういう調べ方をすればいいかだけでもご教授いただければ幸いです。
発生している問題・エラーメッセージ
SWRHookを使用したカートをGetするuseフック(useCart)にトークンを渡したいが、
値が渡らずにundefindになります。
該当のソースコード
フックを呼び出す処理(View)
TypeScript
1 const {data, isLoading, isEmpty} = useCart({ 2 cartId: カートのID 3 token: トークン 4 })
該当のフック
TypeScript
1export const handler: SWRHook<any> = { 2 fetchOptions: { 3 APIのエンドポイントやHTTPメソッド等 4 }, 5 6 async fetcher({ input: { cartId, token }, options: { url, query, method }, fetch }) { 7 8 ////ここでコンソールログを出したとき、 inputの { cartId, token } がundefindになってしまう 9 10 const response = await fetch({ 11 url, 12 query, 13 method, 14 ///ここに cartId, tokenを渡したい 15 }) 16 return response 17 }, 18 19 useHook: 20 ({ useData }) => 21 (input) => { 22 // ここでconsole.log("input",input)を出すと、cartId, tokenにIDとトークンが入っている。 23 const response = useData({ 24 swrOptions: { revalidateOnFocus: false, ...input?.swrOptions }, 25 }) 26 //console.log("response",response.data);//ここにはAPIGET CARTしたレスポンスが返ってくるが、トークンが渡っていない場合のレスポンスになっている。。 27 28 return useMemo( 29 () => 30 Object.create(response, { 31 isEmpty: { 32 get() { 33 return ( ( ( レスポンスにデータがあればFALSEを返す )) 34 }, 35 enumerable: true, 36 }, 37 }), 38 [response] 39 ) 40 }, 41 }
補足
この場合はSWRHookを使っていますが、同じような処理でMutationHookで作成されているものもあり、
その場合はuseHookが以下のようになっていて、上記のような書き方でinputをAPIに渡すことができています。
TypeScript
1 useHook: 2 ({ fetch }) => 3 () => { 4 return async function addItem(input: any) { 5 6 const data = await fetch({ input }) 7 8 return data 9 } 10 }, 11}

回答1件
あなたの回答
tips
プレビュー