flat-fuchsia•2mo ago

How to pass custom params with useList?

const { data: projectDataSourceOptions, isLoading } = useList({
        resource: 'projectDataSourceOptions',
        meta: {
            variables: {
                projectId: my-project-id
            },
            gqlQuery: getProjectDataSourceOptions
        }
    })

const { data: projectDataSourceOptions, isLoading } = useList({
        resource: 'projectDataSourceOptions',
        meta: {
            variables: {
                projectId: my-project-id
            },
            gqlQuery: getProjectDataSourceOptions
        }
    })

this did not work and the request to my API was made using default variables like filter, paging etc

7 Replies

kapa.ai•2mo ago

Hi @baitman. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, it appears that you're trying to pass custom parameters to the useList hook using GraphQL. The approach you've taken is close, but there are a few adjustments needed to make it work correctly. Let me explain how to properly pass custom params with useList: 1. First, ensure you're using a data provider that supports custom GraphQL variables. According to the Handle Custom GraphQL Variables (https://refine.dev/docs/advanced-tutorials/data-provider/handling-filters/#handle-custom-graphql-variables) documentation, the Hasura data provider supports this feature. 2. Instead of using variables, you should use gqlVariables in the meta object. Here's how you can modify your code:

const { data: projectDataSourceOptions, isLoading } = useList({
    resource: 'projectDataSourceOptions',
    meta: {
        gqlQuery: getProjectDataSourceOptions,
        gqlVariables: {
            projectId: 'my-project-id'
        }
    }
})

const { data: projectDataSourceOptions, isLoading } = useList({
    resource: 'projectDataSourceOptions',
    meta: {
        gqlQuery: getProjectDataSourceOptions,
        gqlVariables: {
            projectId: 'my-project-id'
        }
    }
})

3. Make sure your GraphQL query (getProjectDataSourceOptions) is set up to accept the projectId variable. 4. If you're still experiencing issues, double-check that your data provider is correctly set up to handle these custom variables. It's worth noting that some data providers, such as Nestjs-Query and GraphQL, do not yet support meta.gqlVariables according to the documentation. If you're still encountering problems after making these changes, it might be helpful to review your data provider setup and ensure it's compatible with custom GraphQL variables. For more detailed information on handling custom GraphQL variables, you can refer to the Handle Custom GraphQL Variables (https://refine.dev/docs/advanced-tutorials/data-provider/handling-filters/#handle-custom-graphql-variables) documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@349913091779330053> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

flat-fuchsiaOP•2mo ago

    const { data: projectDataSourceOptions, isLoading } = useList({
        resource: 'projectDataSourceOptions',
        meta: {
            gqlVariables: {
                projectId: selectedProject.id
            },
            gqlQuery: getProjectDataSourceOptions
        }
    })

    const { data: projectDataSourceOptions, isLoading } = useList({
        resource: 'projectDataSourceOptions',
        meta: {
            gqlVariables: {
                projectId: selectedProject.id
            },
            gqlQuery: getProjectDataSourceOptions
        }
    })

this did not work either. my dataprovider supports custom parameters as i am using it for auth as well @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: Sorry @baitman, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

flat-fuchsiaOP•2mo ago

@kapa.ai const { data: projectDataSourceOptions, isLoading } = useList({ resource: 'projectDataSourceOptions', meta: { gqlVariables: { projectId: selectedProject.id }, gqlQuery: getProjectDataSourceOptions } }) this did not work either. my dataprovider supports custom parameters as i am using it for auth as well

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand that you're still facing issues with passing custom parameters to the useList hook, even after adjusting the code as suggested. Let's explore this further based on the information provided in the knowledge sources. Given that your data provider supports custom parameters (as you're using it for auth), the issue might be related to how the custom variables are being handled in your specific setup. Here are a few things to consider: 1. Check your data provider implementation: Make sure your data provider is correctly handling the meta.gqlVariables in the getList method. According to the Github issue #5864 (https://github.com/refinedev/refine/issues/5864), you might need to ensure that your data provider is passing these variables correctly. The suggested implementation looks like this:

   variables = {
     ...hasuraPagination,
     ...(hasuraSorting && 
       (namingConvention === "graphql-default"
         ? {
             orderBy: hasuraSorting,
           }
         : {
             order_by: hasuraSorting,
           })),
     ...(hasuraFilters && {
       where: hasuraFilters,
     }),
     ...(meta?.gqlVariables && meta?.gqlVariables), // This line is crucial
   };

   variables = {
     ...hasuraPagination,
     ...(hasuraSorting && 
       (namingConvention === "graphql-default"
         ? {
             orderBy: hasuraSorting,
           }
         : {
             order_by: hasuraSorting,
           })),
     ...(hasuraFilters && {
       where: hasuraFilters,
     }),
     ...(meta?.gqlVariables && meta?.gqlVariables), // This line is crucial
   };

2. Verify your GraphQL query: Ensure that your getProjectDataSourceOptions query is set up to accept and use the projectId variable. 3. Check for naming convention issues: If you're using Hasura, make sure you're using the correct naming convention. The Github discussion #6084 (https://github.com/refinedev/refine/discussions/6084) mentions that adding meta: { gqlQuery: YOUR_QUERY } to the useList hook can help resolve certain errors. 4. Consider using useCustom hook: If you're still having trouble with useList, you might want to try using the useCustom hook instead. This hook allows for more flexibility in passing custom parameters. Here's an example of how you might use it:

   const { data, isLoading } = useCustom({
     url: 'projectDataSourceOptions',
     method: 'get',
     config: {
       query: {
         projectId: selectedProject.id
       }
     },
     queryOptions: {
       enabled: !!selectedProject.id
     }
   });

   const { data, isLoading } = useCustom({
     url: 'projectDataSourceOptions',
     method: 'get',
     config: {
       query: {
         projectId: selectedProject.id
       }
     },
     queryOptions: {
       enabled: !!selectedProject.id
     }
   });

5. Debug the request: If possible, try to intercept and log the actual GraphQL request being sent to your API. This can help you understand if the custom variables are being included in the request or not. If you're still encountering issues after trying these suggestions, it might be helpful to review your entire data provider setup and possibly share more details about your specific implementation. The problem could be related to how your data provider is interpreting and passing along the custom variables. For more information on using custom queries and variables with refine, you can refer to the GraphQL section of the React-admin vs Refine comparison (https://refine.dev/blog/react-admin-vs-refine/#graphql). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@349913091779330053> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How to pass custom params with useList?

Did you find this page helpful?