SSR loading state

[Namchee]

I'm currently building an app that has a paginated page. The initial data is populated through server-side rendering.

const getQuery = (offset: number = 0, query: string): string => {
  if (offset) {
    offset += 1;
  }

  return gql`
    query {
      apps(name: "${escape(query)}", limit: 10, offset: ${offset}) {
        data {
          name
          owner
          url
        }
        count
      }
    }
  `;
};

const { data, error } = useSWR<GraphQLResult, any>(
  getQuery((page - 1) * 10, query),
  graphQLFetcher,
  { initialData },
);

const showSearchResult = React.useCallback(() => {
  if (!data) {
    return ( // loading );
  }

  const apps = data.apps.data;

  if (!apps.length) {
    return ( // empty );
  }

    return (
       // stuff
    );
  }, [ // deps ]);

It works fine in general. However, when I tried to navigate it to the next page, the value of data is always the current page result which means that my loading state is never rendered. Is there any way to render the loading state?

[ramyareye]

I think you should go with useSWRInfinite

You can check these examples:
https://github.com/vercel/swr/blob/master/examples/infinite/pages/index.js
https://github.com/vercel/swr/blob/master/examples/infinite-scroll/pages/index.js

[Namchee]

Unfortunately, it's not an infinitely-scrolling content, so useSWRInfinite doesn't make any sense in this context. My case is probably more similar to this, just with getServerSideProps on the top.

Thanks for the reply though!

[Namchee]

Found the answer. I think I described my use case poorly.

Basically, what I want is to apply the initialData only to the first page. Therefore, I can implement a conditional whether the page is the first page or not.

const { data, error } = useSWR<GraphQLResult, any>(
    [gqlQuery, page],
    (gqlQuery, page) => {
      const variables = {
        query,
        limit: ITEM_PER_PAGE,
        offset: (page - 1) * ITEM_PER_PAGE,
      };

      if (variables.offset) {
        variables.offset += 1;
      }

      return graphQLFetcher<GraphQLVariables>(gqlQuery, variables);
    },
    { initialData: page === 1 ? initialData : null },
  );