Does the with-relay-modern example break when mutating the Relay store?

[Hubro]

I've started writing an application following the with-relay-modern example, and the withData HOC works for fetching data, and the Relay store is properly hydrated on the client side, but the UI doesn't appear to update when mutating the store. I have written a simple updater that looks like this:

function updateStore(
  store: RecordSourceSelectorProxy,
  formInstanceUuid: string,
) {
  const mutation = store.getRootField("updateFormValue");
  const newFormValue = mutation?.getLinkedRecord("formValue");

  if (!newFormValue) {
    throw "Expected new form value from server";
  }

  const localFormInstance = store.get(formInstanceUuid)
  const localValueRecords = localFormInstance?.getLinkedRecords("values") || [];

  for (const record of localValueRecords) {
    if (record.getValue("partUuid") == newFormValue.getValue("partUuid")) {
      console.log("Copying fields from server provided value to local value");

      record.copyFieldsFrom(newFormValue);
    }
  }

  console.debug("New state of store:", initEnvironment().getStore().getSource())
}

This works, I have confirmed from the debug statement at the bottom that the local object that my UI is built from was successfully updated, but my UI doesn't refresh.

I noticed that the example doesn't actually include a QueryRenderer anywhere. Isn't that required for the view to update when the store changes?

If somebody could confirm that the example doesn't actually work when mutating the store that would be immensely helpful, because otherwise I'm completely lost as to why my UI isn't refreshing...

[Hubro]

An update from me, I rewrote my Next.js page to just use QueryRenderer rather than withData, and now mutating local state works, though SSR obviously doesn't.

In other words, the with-relay-modern example appears to be broken and can only work for people with applications that never mutate data.

Somebody should probably update the example to incorporate QueryRenderer somewhere, or update the README to warn that the example only works for read-only applications.

[qarthandgi]

I'm currently in the middle of transitioning a create-react-app to a full-fledged SSR Next.js app with Relay. There's been so many hurdles along the way, notably that I need SSR, and mutations, and Typescript to all work together.

Have you found a guide that has all these working cohesively together?

[Hubro]

I have found no such guide I'm afraid, but I did manage to solve the issue I described here. I don't remember exactly how, but if you are stuck on the same issue let me know and I'll go back and look.

[qarthandgi]

If you would able to go back and see, I would deeply appreciate it. Thank you!

[Hubro]

@qarthandgi The example has changed since I had issues with it, but I think the problem is as I said in my first comment, the example doesn't work when mutating state, because it doesn't include a QueryRenderer. It's the QueryRenderer that listens to the store and triggers re-renders when the data changes.

I fixed this in my own application by writing a withData HOC that wraps the page in a LocalQueryRenderer. It also works with a QueryRenderer, but that will trigger the page to re-fetch the data when the page first loads. Using LocalQueryRenderer ensures it just displays the data that was transferred along with the page after server side rendering.

Here is the withData HOC I ended up with, if you are interested:

import React from "react"
import initEnvironment from "./relay-env"
import { fetchQuery, GraphQLTaggedNode, Variables } from "react-relay"
import { OperationType } from "relay-runtime"
import { ReactRelayContext, LocalQueryRenderer } from "react-relay"
import { NextPage } from "next"
import { useRouter } from "next/router"
import { ParsedUrlQuery } from "querystring"

interface WithDataOptions {
  query: GraphQLTaggedNode
  variables?(query: ParsedUrlQuery): Variables
}

interface WithDataProps<T extends OperationType> {
  composedInitialProps: unknown
  queryResponse: T["response"]
  relayStoreRecords: unknown
}

function withData<T extends OperationType>(
  ComposedComponent: NextPage<T["response"]>,
  options: WithDataOptions
): NextPage<WithDataProps<T>> {
  const WithData: NextPage<WithDataProps<T>> = props => {
    const router = useRouter()

    const { composedInitialProps, queryResponse, relayStoreRecords } = props

    const environment = initEnvironment({
      records: relayStoreRecords as Record<string, unknown>,
    })

    if (typeof window == "undefined") {
      return (
        <ReactRelayContext.Provider value={{ environment }}>
          <ComposedComponent
            {...composedInitialProps}
            {...(queryResponse as Record<string, unknown>)}
          />
        </ReactRelayContext.Provider>
      )
    } else {
      return (
        <LocalQueryRenderer
          query={options.query}
          environment={environment}
          variables={options.variables ? options.variables(router.query) : {}}
          render={({ props }) => {
            return (
              <ComposedComponent
                {...composedInitialProps}
                {...(props as Record<string, unknown>)}
              />
            )
          }}
        />
      )
    }
  }

  WithData.displayName = `WithData(${ComposedComponent.displayName})`

  WithData.getInitialProps = async ctx => {
    // Evaluate the composed component"s getInitialProps()
    let composedInitialProps: unknown

    if (ComposedComponent.getInitialProps) {
      composedInitialProps = await ComposedComponent.getInitialProps(ctx)
    }

    const environment = initEnvironment()

    const queryResponse = await fetchQuery<T>(
      environment,
      options.query,
      (options.variables && options.variables(ctx.query)) || {}
    )

    const relayStoreRecords = environment.getStore().getSource().toJSON()

    console.debug(
      "Serialized Relay store for later hydration on client",
      relayStoreRecords
    )

    return {
      composedInitialProps,
      queryResponse,
      relayStoreRecords,
    }
  }

  return WithData
}

export default withData

I worked on this file a lot before I got it to work and I haven't refactored it yet, so it's a bit messy and doesn't really have any helpful comments.

It's basically a standard withData HOC that you've seen in other examples but in TypeScript, plus it uses a LocalQueryRenderer when rendering in a browser. This makes sure components are re-rendered when the store changes. Also I added a variables callback parameter as a quick and dirty way to let me use the URL as a query variable.

Here's a usage example:

export default withData<edit_formInstance_Query>(EditForm, {
  query: formQuery,
  variables: query => ({ uuid: query.uuid }),
})

[arjun-kava]

I had completed one demo using relay SSR but I had stopped once realised that you have to share cookies for authentication and we can not share cookies of two servers in ethical way.