I love GraphQL and filtering/sorting operations

1

I’m starting to use filtering and sorting more now, and the some/every/none and being able to filter multiple levels of the query is awesome. It would be insane to express these as SQL statements.

Also, I’m getting used to passing dynamic filters, and making my components more generic in what they display. Here’s filtering multiple levels (groups and items):

const GET_FOOS = gql`
  query BarsList {
    barsList(filter: {
      foos: {
        some: {
          person: {
            email: {
              equals: "someone@somewhere.com"
            }
          }
        }
      }
    },sort: {
      sortOrder: ASC
    }) {
      items {
        id
        title
        foos(filter: {
          person: {
            email: {
              equals: "someone@somewhere.com"
            }
          }  
        }) {
          items {
            ...foo
          }
        }
      }
    }
  }
  ${fragments.foo}
`

Dynamic filter:

const GET_COMMENTS = gql`
  query GetComments($filter: CommentFilter!) {
    commentsList(filter: $filter) {
      items {
        id
        postedDate
        content
        foo {
          fooId
          title
        }
        replies {
          items {
            id
            postedDate
            commenter {
              id
              firstName
              lastName
              avatar {
                downloadUrl
              }
            }
            content
          }
        }
        commenter {
          id
          firstName
          lastName
          avatar {
            downloadUrl
          }
        }
      }
    }
  }
`

And my Comments component taking a filter:

const Comments = ({ filter }) => {
  const { loading, error, data } = useQuery(GET_COMMENTS, {
    variables: { filter }
  })

  ...
3 Likes
2

fyi, I’m using Apollo Boost with React hooks, and React Native for Web. I like RNW because it feels like coding for iOS or Android, at a higher level than divs and spans and raw CSS.

Using Boost’s ApolloClient with “request” to pass a Role token (for now, until I set up auth):

import ApolloClient from 'apollo-boost'
import { ApolloProvider } from '@apollo/react-hooks'

import App from './components/App'

const client = new ApolloClient({
  uri: 'https://api.8base.com/ck0n65klb000201jp2nz23jau',
  request: (operation) => {
    const token = '698398fd-7823-424f-a6f5-2ea8ba0b5922'

    operation.setContext({
      headers: {
        authorization: token ? `Bearer ${token}` : ''
      }
    })
  }
})

AppRegistry.registerComponent('App', () => (...props) => (
  <ApolloProvider client={client}>
    <Router>
      <App {...props} />
    </Router>
  </ApolloProvider>
))
1 Like
3

@mike_ekim1024 glad you like it! :raised_hands:

4

Thanks for your feedback! BTW, you should’t share your token with everybody. I recommend you to delete your current token and create new one.

1 Like
5

Oops! Yes, I will delete my token :slight_smile: thanks