withUrqlClient with exchange-graphcache example(next.js)?

[zeing]

I have tried to use exchange-graphcache for pagination with next.js

It isn't worked, I can't find example about it

Anyone have example for this?

import { relayPagination } from '@urql/exchange-graphcache/extras'
import { cacheExchange } from '@urql/exchange-graphcache'
import { initUrqlClient, withUrqlClient } from 'next-urql'

[JoviDeCroock]

Your description is quite unclear here 😅 what didn't work...

Generally how it would look is as followed:

import { fetchExchange } from '@urql/core';
import { relayPagination } from '@urql/exchange-graphcache/extras'
import { cacheExchange } from '@urql/exchange-graphcache'

const cache = cacheExchange({
  resolvers: { YourType: { field: relayPagination() }}
})

export default withUrqlClient(
  ssrExchange => ({
    url: 'https://trygql.formidable.dev/graphql/basic-pokedex',
    exchanges: [cache, ssrExchange, fetchExchange],
  }),
  { ssr: true }
)(YourComponent;

[zeing]

Sorry for my unclear description.

Just want a full example for next.js with withUrqlClient and exchange-graphcache

But your example codes, it's helpful. 🙏🏽

[kitten]

https://github.com/urql-graphql/urql/tree/main/examples

Examples are here, docs have guides too, and there's nothing specific about Next.js + Graphcache 😅

[zeing]

Yes , There's not 😢

Thank you <3

[kitten]

Yes, what I mean is: there's nothing specific you have to do to use Next.js and Graphcache together. Hence, there's no example for Next.js+urql+Grapchache

[zeing]

I am making infinite pagination in the next.js project

And I want to cache data when I go next page.

I've decided to use @urql/exchange-graphcache

Im not sure , It's good way