

CloudfirestoreにuseSWRでクライアントサイドのfetchを行いたいのですが、そのAPIの指定の書き方がうまくわからず質問しました。

といいますのも、現在NextJSを用いてTodoアプリを作成しているのですが、その際にSWRをもちいて、データを持ってきたいです。  
SWRでは下記のようにして記述しています。

[code]

    const { data: tasks, mutate } = useSWR( (自分のプロジェクトのAPI),
        fetcher,
        {
            fallbackData: statictasks,
        }
    )
    
[/code]

色々と調べてみたのですが、この自分のプロジェクトの指定において下記の記事のように記述しても、ローカル環境などでは
`http://localhost:3000/firestore/posts` となり、当然そんなURLはないとエラーがでます。

[SWRで爆死を避ける。firebase Cloud
FirestoreとNext.js](https://zenn.dev/mast1ff/articles/a71ece42905c74)

>
[code]

>     const { data: posts } = useSWR('firestore/posts', fetchPosts);
>  
[/code]

Firestore公式に
`https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/cities/LA`
といった記述で取得ができると記載があったのですが、これでは返り値が `{documents:[]}` とオブジェクトの型で帰ってきており、本来
`[{},{}...]` といった形でかえってきてほしいのに対し、このましい返り値ではありません。  
<https://firebase.google.com/docs/firestore/use-rest-api>

また、[Firestore用のSWRライブラリ](https://www.npmjs.com/package/swr-firestore-v9)
も発見したのですが、これでは公式のSWRとちがってfallbackstateの初期値設定ができず、SSGで取得した値を初期値として割り当てることができません。

どなたかご教授いただけないでしょうか？


CC BY-SA 4.0
2021-12-07T23:32:17.170
84012
2022-03-22T23:32:02.707
2021-12-08T00:08:47.440
3060
49065
question
reactjs firebase next.js
cloud firestore でのuseSWRの使用についての質問


restAPIで返ってくる型が違うということなので、欲しい型にするような  
useSWRをラップしたカスタムフックを作ればいいのではないでしょうか？

[code]

    export const usePosts = () => {
      const { posts } = useSWR('firestore/posts', fetchPosts);
    
      return {
        posts : posts.documents
      };
    };
    
[/code]


CC BY-SA 4.0
2022-03-22T23:32:02.707
87970
2022-03-22T23:32:02.707
20906
84012
answer