How do I use Cell lifecyle to carry data through the Cell?

Get Help and Help Others
1

I see how to get data into the Cell via beforeQuery

But I can’t figure out how to get at the data from the other lifeCycle hooks…

Please add to the Docs an example of using the data that’s passed in

export const QUERY = gql`
  query AnswersQuery {
    answers {
      answer
      question
      business
      reduction
      access
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ error }) => <div>Error: {error.message}</div>

export const Success = ({ answers }) => {
  return JSON.stringify(answers)
}

export const beforeQuery = (props) => {
  console.log(`props:`, JSON.stringify(props, null, 2))
  return { variables: props, fetchPolicy: 'network-only' }
}

export const afterQuery = (data) => {
  // I need my Props here !!
  return data
}
2

Hi @ajoslin103 - what data would you expect to see?

In the Empty state – there is no data, thus empty.

In the Loading state, there is no data … it is in the process of fetching, ie loading.

In the Failure state, the data is the error.

From what I read in your other posts, you will return the access and some auth token to “refetch” on error.

You may need to raise an error instead and then based on the error type take some action. Maybe you can stash some of the necessary data on the Error payload … but that might require a Custom Error to exist on both the web and api sides?

Or, always handle this in success where the other attributes are empty and Success will refetch.

But this is going to be problematic when deployed – lambda functions like graphql on Netlify and Vercel only run for ~10seconds and then you’ll get an exception so that will raise an error.

The other approach I could think of is if you can get the re-fetch that access auth info ahead of time and then the answer query and then if it fails – error case or empty case, use that info to repoll/refetch.

3

Or can

function DogPhoto({ breed }) {
  const { loading, error, data, refetch } = useQuery(GET_DOG_PHOTO, {
    variables: { breed }
  });

  if (loading) return null;
  if (error) return `Error! ${error}`;

  return (
    <div>
      <img src={data.dog.displayImage} style={{ height: 100, width: 100 }} />
      <button onClick={() => refetch()}>Refetch!</button>
    </div>
  );
}

You use refetch instead? It should have those original props that made the request.

You can refetch() in the Error case or if empty or give the user the option in Success.

4

I am sorry for the confusion – I should have read my question more carefully before I posted it

I see how to get props/values into the Cell via beforeQuery – that’s key

But I can’t figure out how to get at those same props/values from the afterQuery function

I figure they must be attached to the Cell somehow, but nothing is explaining how to access them.

Is there a more ‘Redwood’ way then using a [module?] variable


let temp

export const beforeQuery = (props) => {
  temp = props
  return { variables: props, fetchPolicy: 'network-only' }
}

export const afterQuery = (data) => {
  console.log(`temp:`, JSON.stringify(temp, null, 2))
  return data
}
5

Ah, I see – the Redwood way is much more elegant

export const beforeQuery = (props) => {
  return { variables: props, fetchPolicy: 'network-only' }
}

export const Success = ({ answers, variables }) => {
  variables.someSetterFn(answers)
  return <div>Success</div>
}
1 Like