How to handle dynamic variables in useQuery?

Started fiddeling with this package and it looks really awsome. I am trying to understand how to automatically refetch when variables changes in a useQuery hook. I don’t know if i misunderstood something but this is what I have tried, and it only fetches once.`

On first render, it fetches correctly and logs correct data and variables. When setVariables it runs it updates those correctly, but no re-render is done and it logs new variables but same old data. Am i missing something here? There is no example for this.

function foo() {
  const [variables, setVariables] = useState({});
  const { data, loading } = useQuery(SOME_GRAPHQL_SCHEMA, {
    variables,
    suspend: false,
  });

  if(loading) return <p>Loading</p>;
  console.log(data, variables);
  return (...);
}
```

[trojanowski]

@rsjolundchas the first example should work. Please look at https://codesandbox.io/s/n4o02oz6jm - you should see different images for cats and dogs.

[EricGrudzien]

Hi,

Encountered this too. Issue of setting the value of title did not cause a re-query of the API.

Here is the way I was able to resolve.

Before (not work):

const BOOKS_QUERY = gql`
  {
    books {
      author
      title
    }
  }
`;

// note, the below lines of code are in the React function
const [title, setTitle] = useState("");

const { loading, error, data } = useQuery(BOOKS_QUERY, {
    variables: { title }
  });

Resolution (works!) - modified the query:

const BOOKS_QUERY = gql`
  query getBooks($title: String) {
    books(title: $title) {
      author
      title
    }
  }
`;

And then was able to achieve the desired outcome.