No data return, but keep requesting via fetcher

[tom555my]

Hi guys,

I am working on a graphql based application with Next.js, and trying to use SWR to improve the user experience. I created a hook to bootstrap the graphql request, called useGql.js. The code is attached below:

useGql.js

import { Session } from 'next-auth';
import { useSession } from 'next-auth/client';
import useSWR from 'swr';
import { GraphQLClient } from 'graphql-request';
import apiConfig from '../config/api';
import { useEffect } from 'react';

const { endpoint } = apiConfig;
function getGraphQLClient(session: Session | null) {
  // console.log(session);
  let headers: { [key: string]: any } = {};

  if (session) {
    headers = {
      authorization: `Bearer ${session.token}`,
      'X-Hasura-Allowed-Roles': ['customer', 'admin'],
      'X-Hasura-Default-Role': 'customer',
      'X-Hasura-Role': session.role,
      'X-Hasura-User-Id': session.id,
    };
  }

  const graphQLClient = new GraphQLClient(endpoint, {
    headers,
  });

  return graphQLClient;
}

const fetcher = async (...arg: any) => {
  const [query, variables, session] = arg;
  const client = getGraphQLClient(session);
  const data = await client.request(query, variables);
  console.log(data);
  return data;
};

const fetch = (...arg: any) =>
  fetcher(...arg).then((data) => new Promise((resolve) => resolve(data)));

export default function useGql(query: any, variables?: any) {
  const [session] = useSession();
  const { data, error } = useSWR(
    session ? [query, variables || {}, session] : [query, variables || {}],
    fetch,
    { refreshInterval: 1000 }
  );

  useEffect(() => {
    console.log('useGql');
    console.log(data, error);
  }, [data, error]);

  return { data, error };
}

However, the return value of useSWR (ie: data, error) never return value (ie: being undefined) coming from the fetch function. I tried many other ways and other package, but nothing works.

Thanks for reading longgg text. Please help me!

[shuding]

Hi! Would love to help but can't spot any bug quickly. One question though is why using fetcher(...arg).then((data) => new Promise((resolve) => resolve(data))) instead of just pass the fetcher?

[tom555my]

@shuding Thanks for replying! I removed fetch and use fetcher now, but it still doesn’t work. I am using useGql like this:

const { data, error } = useGql(getPaymentMethodsGql, {
    order_by: orderBy,
    _and: where,
    limit,
    offset: pageIndex * limit,
});

Apart from getPaymentMethodsGql(which is a string), variables in this hook are states returned by useState. Any idea why this happens? Many thanks!