strange behaviour with next-urql and ssr #1136

addstar34 · 2020-11-08T12:16:22Z

addstar34
Nov 8, 2020

When I do a full page load I can see my loading state and I can see the network request in devtools, as this is a full page refresh shouldn't this be run on the server and not visible in devtools? To make things weird when I view page source I can see the results of the query in the html markup as if the queries were ran on the server. I checked the server logs and it only ran the query once.

I'm using next-urql and have wrapped pages/_app.js with withUrqlClient and I've set ssr: true.

Here's my repo: https://github.com/addstar34/next-urql

I tried to find a public graphql api to make it easy for others to pull down and test but no luck. So, to use in pages/_app.js update the urql url options and then in pages/search update the query. Or if anyone knows a public graphql api I'll updat the repo.

For convenience here's pages/_app.js:

import { withUrqlClient } from 'next-urql'
import { dedupExchange, fetchExchange } from '@urql/core'
import { cacheExchange } from '@urql/exchange-graphcache'
import { devtoolsExchange } from '@urql/devtools'

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default withUrqlClient(
  (ssrExchange) => {
    return {
      url: 'http://localhost:4000/gql',
      fetchOptions: () => {
        const options = { credentials: 'include' }

        if (typeof window === 'undefined') {
          return options
        }

        const token = localStorage.getItem('token')

        if (token) {
          return {
            ...options,
            headers: {
              Authorization: `Bearer ${token}`,
            },
          }
        }

        return options
      },
      exchanges: [
        process.env.NODE_ENV === 'development' && devtoolsExchange,
        dedupExchange,
        cacheExchange({
          updates: {
            Mutation: {
              signin: (result, args, cache, info) => {
                cache.updateQuery(
                  { query: `{ currentUser { id, email } }` },
                  (data) => {
                    console.log('data', data)
                    data.currentUser = result.signin.user
                    // data = { currentUser: result.signin.user }
                    return data
                  }
                )
              },
            },
          },
        }),
        ssrExchange,
        fetchExchange,
      ],
    }
  },
  { ssr: true }
)(MyApp)

page with the query pages/search:

import Head from "next/head";
import { useQuery } from "urql";
import Nav from "../components/nav";

const profilesQuery = `
  query {
    profiles {
      id
      description
      slug
    }
  }
`;

function SearchPage() {
  const [{ data, fetching, error }] = useQuery({
    query: profilesQuery,
    requestPolicy: "cache-first",
  });

  return (
    <>
      <Head>
        <title>Search</title>
      </Head>

      <Nav />

      <main>
        <h1>Search</h1>

        {fetching ? (
          <p>loading...</p>
        ) : error ? (
          <p>error</p>
        ) : (
          <ul>
            {data?.profiles.map((profile) => (
              <li key={profile.id}>{profile.slug}</li>
            ))}
          </ul>
        )}
      </main>
    </>
  );
}

export default SearchPage;

I'm using the latest versions of all dependencies:

"dependencies": {
    "@urql/exchange-graphcache": "^3.1.11",
    "graphql": "^15.4.0",
    "next": "10.0.1",
    "next-urql": "^2.1.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-is": "^17.0.1",
    "urql": "^1.11.0"
  },
  "devDependencies": {
    "@urql/devtools": "^2.0.2"
  }

Answered by JoviDeCroock

Nov 8, 2020

Hey,

This PR aims at fixing your issue, the csb-run will soon have a package that you can try out on your branch. I checked your repo and it seems to work correctly but it would be awesome if you'd double check.

Installable by:

 "urql": "https://pkg.csb.dev/FormidableLabs/urql/commit/20bed312/urql"

EDIT: this has been published on urql@1.11.1

View full answer

JoviDeCroock · 2020-11-08T14:29:36Z

JoviDeCroock
Nov 8, 2020
Maintainer

Hey,

This PR aims at fixing your issue, the csb-run will soon have a package that you can try out on your branch. I checked your repo and it seems to work correctly but it would be awesome if you'd double check.

Installable by:

 "urql": "https://pkg.csb.dev/FormidableLabs/urql/commit/20bed312/urql"

EDIT: this has been published on urql@1.11.1

4 replies

addstar34 Nov 8, 2020
Author

Tested and yup that fixes it! Thanks JoviDeCroock.

schulzf Sep 10, 2021

I'm having the same exact problem with the most recent version. (i.e. network request are being done on client side)
I've tried running withUrqlClient with essential options and no luck, all my network request are still being done on client side

here is my code

dependencies:

    "@material-ui/icons": "^4.11.2",
    "@urql/exchange-graphcache": "^4.3.3",
    "formik": "^2.2.9",
    "graphql": "^15.5.1",
    "next": "11.1.0",
    "next-urql": "^3.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-is": "^17.0.2",
    "react-jss": "^10.7.1",
    "urql": "^2.0.4"

JoviDeCroock Sep 10, 2021
Maintainer

@schulzf all your queries have pause: isServer()

Also this

import { Cache, QueryInput } from '@urql/exchange-graphcache';

export function betterUpdateQuery<Result, Query>(
  cache: Cache,
  qi: QueryInput,
  result: any,
  fn: (r: Result, q: Query) => any
) {
  return cache.updateQuery(qi, (data) => fn(result, data as any) as any);
}

Can be replaced with https://github.com/dotansimha/graphql-code-generator/tree/master/packages/plugins/typescript/urql-graphcache which automatically leverages the generic on your caccheExchange

schulzf Sep 10, 2021

Thanks @JoviDeCroock, idk how I overlooked this 😓
Much appreciation for you help 🙏

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

strange behaviour with next-urql and ssr #1136

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

strange behaviour with next-urql and ssr #1136

addstar34 Nov 8, 2020

Replies: 1 comment · 4 replies

JoviDeCroock Nov 8, 2020 Maintainer

addstar34 Nov 8, 2020 Author

schulzf Sep 10, 2021

JoviDeCroock Sep 10, 2021 Maintainer

schulzf Sep 10, 2021

addstar34
Nov 8, 2020

Replies: 1 comment 4 replies

JoviDeCroock
Nov 8, 2020
Maintainer

addstar34 Nov 8, 2020
Author

JoviDeCroock Sep 10, 2021
Maintainer