Using variables with SWR and graphql (graphql-request)

[josh-unwin]

Hi everyone,

I'm stuck trying to use SWR with graphql-request when using variables.

I've looked at the docs on graphql and multiple arguments but I'm still a bit confused on the syntax of it.

The attempts I have tried are returning no data and causing constant refreshes in React (I can get data through without the variables). The backend server is being hit constantly (many times a second) and returning 200 statuses but the front end app never gets past the isLoading status.

Example of my attempt:

function getDataForSwrViaGraphql(graphQlQuery, variables = {}) {
  const { data, error } = useSWR([graphQlQuery, variables], graphQlFetcher);

  return {
    data: data,
    isLoading: !error && !data,
    isError: error
  }
}

const productsGraphqlQuery = gql`
  query productsQuery($limit: Int) {
    products(limit: $limit) {
      id
      name
      price
      }
  };

const variables = {
   limit: 10,
  };

getDataForSwrViaGraphql(productsGraphqlQuery, variables);

[sergiodxa]

Your wrapper should be called useSomething to be able to call a Hook

[josh-unwin]

Your wrapper should be called useSomething to be able to call a Hook

Ah, I've renamed it to useGraphql for the moment to test and it doesn't seem to make any difference.

If I pass in null instead of a variables object the API call does return the data fine, as soon as I pass in an object to the variables it gets stuck constantly loading. The backend server is being pinged constantly (many times a second) and returning 200 status each time but nothing displays in the frontend Next app.

[sergiodxa]

Ahh, yes, that's expected, if you create your variables object inside the component it will be regenerated on each render causing a new request. You need to pass variables without an object or manually serialize them.

useSWR([query, variable1, variable2]), (query, variable, variable2) => runQuery(query, { variable1, variable 2}))`

Something like that.