Resource picker for Customers

Highlighted
New Member
3 0 0

Hi! I'm new here, I'm trying to create an App. I did the tutorial on Shopify "Build an app with NodeJS and React". It went well. So i triied to adapt what I want from there. But there is something I can't find on Shopify, on the forums ... I need something like a Resource Picker but not for products, for customers. I found out that the only "types" ResourcePicker have are "product", "productvariant" and "collection". But nothing for customer.

 

Can someone help me please??

Thanks :)

0 Likes
Shopify Staff
Shopify Staff
607 82 89

Hey @ChristelleDudon,

 

You should be able to use a resource list - check out the resource list with bulk actions example.

1 Like
Highlighted
New Member
3 0 0

Hi! Thank you very much for your help!

 

I've already tried that solution, but I'm not able to use the GraphQL requests to show my Customer list. I tried to use to tutorial on Shopify with  NodeJS and React  on that part, but there is still something I'm missing.

 

I tried to do the "ResourceListWithProduct" but with a customer request. Here's what I did ... is there something wrong?

 

class ResourceListWithCustomers extends React.Component {
  render() {
    return (
      <Query query={GET_CUSTOMERS} variables={{ ids: store.get('ids') }}>
        {({ data, loading, error }) => {
          if (loading) return <div>Loading…</div>;
          if (error) return <div>{error.message}</div>;
          console.log(data);
          return (
            <Card>
              <ResourceListWithCustomers
                showHeader
                resourceName={{ singular: 'Customer', plural: 'Customers' }}
                items={data.nodes}
                renderItem={item => {
                  return (
                    <ResourceListWithCustomers.Item
                      id={item.id}
                      accessibilityLabel={`View details for ${item.displayName}`}
                      onClick={() => {
                        store.set('item', item);
                        console.log("euhhh, click");
                      }}
                    >
                      <Stack>
                        <Stack.Item fill>
                          <h3>
                            <TextStyle variation="strong">
                              {item.displayName}
                            </TextStyle>
                          </h3>
                        </Stack.Item>
                        <Stack.Item>
                          <p>{item.email}</p>
                        </Stack.Item>
                        <Stack.Item>
                          <p>{item.tags} </p>
                        </Stack.Item>
                      </Stack>
                    </ResourceListWithCustomers.Item>
                  );
                }}
              />
            </Card>
          );
        }}
      </Query>
    );
  }
}

 export default ResourceListWithCustomers;

Thank you !

0 Likes
Highlighted
New Member
3 0 0

Right, I also forgot to mention that when I run the App on the developement store, I can see the "Loading...". When I look into my console, I can see "Object { customers: {} }" running non stop. I can't see where is the infinite loop ...

 

Thanks !

0 Likes
Highlighted
Shopify Staff
Shopify Staff
607 82 89

Hey @ChristelleDudon 

 

I suspect the loop is caused by rendering <ResourceListWithCustomers> inside a ResourceListWithCustomers component.

0 Likes