ReactJS : import GraphQL queries dynamically based on a State

Question

I query a specific variable called nameTranslated from my schema, It takes the parameter of the locale with is En-CA, Fr-FA etc and gets the desired word in french. And the way I handle this in my frontend reactjs application is like this:

export const App = () => {
const { locale } = useIntl()

const LOAD_TABLE = gql`
query getItems($id: String!) {
  Items(id: $id) {
    id
    notes
    nameTranslate(language:"${l}")
    defaultClass {
      nameTranslate(language:"${l}")
    }
  }
}
`
useEffect(() => {
// a function to fetch LOAD_TABLE 
},[locale])
}

The above code works perfectly fine and whenever I change the locale variable it re fetches the query. But the problem with this is i have many other query I need to work with, my file length becomes too long and hard to manage. At the same time if I pull the file out, I lose the privilage of dynamacally adding a type for nameTranslate.. How can I solve this issue?

nanobar · Accepted Answer · 2021-11-15 19:37:41Z

1

You can make it more modular but still dynamic by using custom hooks, for example:

// hooks/useItemsQuery.js
function useItemsQuery(locale) {
  const itemsQuery = useMemo(() => gql`
    query getItems($id: String!) {
      Items(id: $id) {
        id
        notes
        nameTranslate(language:"${locale}")
        defaultClass {
        nameTranslate(language:"${locale}")
        }
      }
    }
  `, [locale])

  return itemsQuery
}

// App.js
export const App = () => {
  const { locale } = useIntl()

  const itemsQuery = useItemsQuery(locale)
  
  useEffect(() => {
    // a function to fetch itemsQuery
  }, [itemsQuery])
}

Or if you need to call outside of React just a normal function will do. I think this won't have a perf impact as es6 tpl literals are cached (the gql`` part) as long as the variables don't change, even inside a function. If that's the case the use of useMemo above is redundant anyway.

function itemsQuery(locale) {
  return gql`
    query getItems($id: String!) {
      Items(id: $id) {
        id
        notes
        nameTranslate(language:"${locale}")
        defaultClass {
        nameTranslate(language:"${locale}")
        }
      }
    }
  `
}

edited Nov 15, 2021 at 19:37

answered Nov 15, 2021 at 17:58

nanobar

66.8k26 gold badges155 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

WildThing Over a year ago

thanks this is helpful but here It seems I must call useMemo inside a react component, Is it possible I can use it in a normal file? without using useMemo

Drew Reese Over a year ago

@WildThing useMemo (and other Hooks) can be called from custom hooks as well.

nanobar Over a year ago

@WildThing from outside you can instead create a normal function (not starting with use e.g. itemsQuery, and strip out the use of useMemo. Thinking about it, ES6 strings are cached anyway so there may be no perf overhead to not using useMemo - will update with an example

Collectives™ on Stack Overflow

ReactJS : import GraphQL queries dynamically based on a State

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related