Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data undefined from useQuery when using pagination #2236

Closed
harryfpayne opened this issue Feb 2, 2022 · 1 comment · Fixed by #2238
Closed

Data undefined from useQuery when using pagination #2236

harryfpayne opened this issue Feb 2, 2022 · 1 comment · Fixed by #2238
Labels
bug 🐛 Oh no! A bug or unintented behaviour.

Comments

@harryfpayne
Copy link

I've noticed flickering on paginated queries when I upgraded to urql version 2.1.2 from 2.0.6.

Here's a minimal example:

export default function Home() {
  const [args, setArgs] = useState<{take: number, offset: number}>({take: 10, offset: 0});
  const [{ data, fetching }] = useQuery<{ getAllPokemonSpecies: string[] }>({
    query: `query ($take: Int!, $offset: Int!){
      getAllPokemonSpecies(offset: $offset, take: $take)
    }`,
    variables: args,
  });

  function fetchMore() {
    setArgs(p => ({...p, offset: p.offset + p.take}))
  }

  return (
    <div>
      {(data === undefined || data.getAllPokemonSpecies.length === 0 )? (
        <div>No pokemon</div>
      ) : (
        <>
          {data.getAllPokemonSpecies.map(pokemon => (
              <div key={pokemon}>{pokemon}</div>
          ))}
        </>
      )}
      <button onClick={fetchMore}>Load 10 more</button>
    </div>
  )
}

With the provider defined as:

const cache = cacheExchange({
  resolvers: {
    Query: {
      getAllPokemonSpecies: simplePagination({limitArgument: "take", offsetArgument: "offset", mergeMode: "after"}),
    },
  },
});

export const client = createClient({
  url: "https://graphqlpokemon.favware.tech/",
  exchanges: [dedupExchange, refocusExchange(), cache, fetchExchange],
});

export function GraphqlProvider({ children }) {
  return <Provider value={client}>{children}</Provider>;
}

When I'm using version 2.1.2 the list will flicker back to 'No pokemon' while fetching, this doesn't match the behaviour of 2.0.6

I made a minimal demo app to demonstrate: https://github.com/harryfpayne/urql-pagination-bug.
You should find that downgrading to version 2.0.6 will stop the flickering while fetching

urql version:
urql 2.1.2

Steps to reproduce:

  1. fetch while using simplePagination
  2. Observe the data returned from useQuery is undefined while the request is fetching

Expected behavior
The previous state should persist while the request is being performed, this happens in version 2.0.6

Actual behavior
The data is undefined while the request is being performed

@JoviDeCroock
Copy link
Collaborator

This should be fixed in 2.1.3, feel free to reopen if the issue persists, the linked PR's contain the reproduction used

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Oh no! A bug or unintented behaviour.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants