Can I use SWR with GraphQL & inside the getStaticProps method?

[georgekrax]

I am short of a beginner here, so I would like to ask if I can use the useSWR hook with my GraphQL API built with Apollo. I would not like to use the Apollo Client on the front-end, so I am interested in using Relay Modern. I have seen various articles and it says it also in the documentation that SWR works great with GraphQL. But does this means it works with a GraphQL API or just with the graphql-request package?

Also, what should I do for fetching data inside the getStaticProps or getServerSideProps methods, provided by Next.js. Will this technique boost my performance, or is it not going to make any change. Or, should I only use it within a React.js component (most likely in the useEffect() hook)?

Note: I will be using ISSG a lot, so I am not going to use only the default SSG that would fetch the data at build time.

---

Thank you in advance for your help or advice!

OMG, I love GitHub discussions, you can now ask things or propose new ideas, without messing with a repo's Issues tab that is important to use only for bugs or errors.

[sergiodxa]

About how to use SWR with GraphQL. SWR is not GraphQL first as Apollo or Relay, but because the fetcher can be any async function you could use something like graphql-request to fetch a GraphQL API, you could also use Fetch API and send your query in the body of your request as graphql-request does. Usually people use the GraphQL query as key of SWR combined with the variables of the query, search for GraphQL in the issues to find examples.

About Next.js data-fetching methods, you can't use SWR there because SWR is a Hook so it only runs inside the actual React components, but what you could totally do is to fetch the data you will need in those Next.js methods, pass them as props and use them as initialValue of SWR. Check the Usage with Next.js page in the docs for an example.

[georgekrax]

Thank you for your answer! Yeah, you are right I have not thought before that I can not use hooks inside Next.js's data fetching methods. I read the docs in the link you added, and yeah I find it really useful. As I try to understand, this means that we pass to the useSWR hook our previously fetched data, and then the hook only caches them?

Also, should I use Relay Modern Client on Next.js's data fetching methods?

[georgekrax]

May someone has already built a project using GraphQL & the useSWR hook? How did you implement yourself?

[eduwr]

I have one example using SWR and graphql-request to fetch the data.

https://github.com/eduwr/pokedex-nextjs-graphql/blob/main/src/pages/index.tsx

[georgekrax]

@eduwr Thanks!