How do I access cell props in a service?

#1

I do not understand how to access the multiple params I passed into my cell, when I am down in my service

I’ve got everything else working and now it’s time to use params to make the call

Here I use the cell:

    <div className={classes.root}>
      <MyCell
        cellNdx={cellNdx}
        business={business}
        title={title}
        phone={phone}
      />
    </div>

Here is the cell query

  export const QUERY = gql`
    query MyQuery($business: String!, $title: String!, $phone: String!) {
      labels(phone: $phone, title: $title, business: $business) {
        location
        question
        business
        reduction
        access
        message
        authorization
      }
    }
  `

So now down in the service I need these params – how do I access them here? It seems like Redwood would just hand them to me like this…

export const labels = ({ business, title, phone }) => { <code in here> }

Execution is not even getting to the service – I get api errors in “KnownArgumentNamesRule”

api | GraphQLError: Unknown argument “business” on field “Query.labels”.
api | GraphQLError: Unknown argument “title” on field “Query.labels”.
api | GraphQLError: Unknown argument “phone” on field “Query.labels”.
api |
api | 1 Object.Argument
api | …/labels-project/node_modules/graphql/validation/rules/KnownArgumentNamesRule.js:46

Something is even stopping me from getting there to figure it out…

#2

What’s the input param to your labels query as defined in your labels.sdl.js?

So … if you take the basic Query cases of “find all” and “find by id”:

  // labels.sdl.js
  type Query {
    labels: [Label!]!
    label(id: String!): Label
  }

but in the many labels case you might need:

  type Query {
    labels($business: String!, $title: String!, $phone: String!): [Label!]!
    label(id: String!): Label
  }

That matches your query arguments.

Or you might define a new type that represents: $business: String!, $title: String!, $phone: String! like labelCriteria so something.

You can use the GraphQL Playground or Insomnia to view the schema and query it expects:

image
image709×615 43.3 KB

You’d see the labels Query with what it expects:

type Query {
  redwood: Redwood
  labels: [Label!]!
#3

Ah! the .sdl. file – I missed that >> Thank You !!

  type Query {
    labels(business: String!, title: String!, phone: String!): [Label!]!
  }

That works!!

Now, keeping in mind that I’m calling AWS lambda’s - not accessing a db – how do I set the cell into an error state?

  return fetch(awsUrl, {method, headers, body})
    .then(thenDebug('raw'))
    .then((res) => {
      if (!res.ok) {
        throw new Error(`Error ${res.status}: ${res.statusText}`) <<<< this did not do it...
      }
      return res
    })
    .then((res) => res.json())
    .then((res) => (res.data ? res.data : res))
    .then((res) => [res])
    .then(thenDebug('result'))
#4

The RW api service doesn’t care if you use a Prisma client, Contentful client, got, axios, fetch, another GraphQL via Hasura – whatever – your service is a service that “does something” and returns information that matches the SDL you’ve defined such that RW’s graphql (which is a just a function … and will be an AWS lambda function if you deploy say to Netlify) returns that data.

I recommend reading:

to see how the cell component works on the web side.

As noted in the docs:

While it might seem like there must be lot of magic involved, a Cell is actually just a higher-order component that executes a GraphQL query and manages its lifecycle. All the logic’s actually in just one file: withCellHOC.tsx. The idea is that, by exporting named constants that match the parameters of withCell , Redwood can assemble this higher-order component out of these constants at build-time using a babel plugin!

So, you need to respond with something that will cause the Error lifecycle:

Maybe try → catch and then rethrow in your service around that return fetch(awsUrl, {method, headers, body})?

#5

You may also want to consider throwing an Apollo Server error like those in:

You can import these via:

import { AuthenticationError, ForbiddenError, UserInputError } from '@redwoodjs/api'

Or a custom error like: